First front end project unordered list troubles

Code Feedback
1

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

09 PM
09 PM1440×804 217 KB

What am I doing wrong?

2

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;
}”

1 Like
3

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.

4

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.

5

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!

6

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).

7

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.