When I try to center a the text in the centers but the bullet points stay on the far left of the page. Is there any way to ge
Here's how you do it.
First, decorate your list this way:
⁕
text text text text text text text text text text text text text text text text
text text text text text text text text text text text text text text text text
text text text text text text text text text text text text text text text text
text text text text text text text text text text text text text text text text
⁕
text text text text text text text text text text text text text text text text
text text text text text text text text text text text text text text text text
text text text text text text text text text text text text text text text text
text text text text text text text text text text text text text text text text
Add this CSS:
.p {
position: relative;
margin: 20px;
margin-left: 50px;
}
.text-bullet-centered {
position: absolute;
left: -40px;
top: 50%;
transform: translate(0%,-50%);
font-weight: bold;
}
And voila, it works. Resize a window, to see that it indeed works.
As a bonus, you can easily change font and color of bullets, which is very hard to do with normal lists.
.p {
position: relative;
margin: 20px;
margin-left: 50px;
}
.text-bullet-centered {
position: absolute;
left: -40px;
top: 50%;
transform: translate(0%, -50%);
font-weight: bold;
}
⁕
text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text
text text text text text text text text text text text text text
⁕
text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text
text text text text text text text text text text text text text