I’m just starting front end design and I can’t get the unordered list on my tribute page working quite right. I want to center the text, so I add the class text-center to the ul element. This makes the words centered but not the bullet point. This is what the code looks like now,
<ul class="white-text text-center">
<li>1757-Born in Charlestown, St Kitts and Nevis</li>
</ul>
and this is what the site looks like
What am I doing wrong?
I had this same problem. Eventually, I found a workaround using the CSS and margin settings. You need to create ul class in the CSS workspace and set the margin to auto and the width to less than 100%. I had to play around a bit before I could get it to look right at 35%.
I hope that helps and if anyone knows a better way, I’d love to hear.
The code I used was"
“ul {
width: 35%;
margin: auto;
}”
This seems to work in the edit view but not in the full page view, which is something I’m having problems with with other elements.
If you want the bullets to follow the text alignment you can use list-style-position on your <ul> element.
ul {
list-style-position: inside;
}
You can see it working here.
I just figured this out using
ul{
display: table;
margin: 0 auto;
}
for anyone else on this thread who had trouble. Thanks everyone for the input!
Oh, I actually didn’t understand what you were trying to do, sorry.
Are you using Bootstrap 4? If that’s the case you can just assign the classes “d-table mx-auto” to your ul for the same effect (but it’s just a matter of preference, obviously).
Only problem I found with this is, since the width is fixed at 30%, the text will begin wrap at 30%. It does bring the bullet points to the write positions, but the code isn’t flexible.