Help with <ul> alignment

1

See the Pen Homer Hickman by Jim Baker (@jimbobbaker) on CodePen.

I’m having trouble with my bullets for my tribute
I keep trying to see what I messed up but I can’t see what I did wrong.
Can one of you take a look and see what I did wrong.

2

What is it exactly that you are trying to do? When I open the Codepen I don’t see anything out of the ordinary in the render.

I did notice that <ul>'s and <li>'s in the html weren’t closed. But closing them myself did not seem to have effect on the render.

1 Like
3

I’m trying to center the lists but I can’t seem to get them to

4

Hoping fresh eyes can see what I’m over looking

5

To center the text you can simply add the following:

ul {
  text-align: center;
}

But you will notice it has the following effect:

0                            text
0                        longer text

This is because of the list-style-position property. By default it is set to outside. You can see this by removing padding from an <ul>. The bullets are now off-page. You can also set the property to inside. Resulting in bullets that join the text in the center:

                          0   text
                       0   longer text

This is the CSS I used to get that effect:

ul {
  padding: 0;
  text-align: center;
}

li {
  list-style-position: inside;
}

You will also want to remove the padding from the <ul> because it will otherwise push the list-items 40px to the right.

1 Like
6

Yeah, none of your tags are closed…thats going to affect your layout.

Clean up your html, close your tags, wrap your ul in a div with a class of text-center and you’ll be good to go.

7

I appreciate it! That makes sense

Thanks for your help

1 Like