I am having a lot of trouble trying to get the UL to be even. I have tried using flexbox. I have tried putting it in a div and centering it that way. I have tried just doing text-align: center; in the div, ul, and individual li. Nothing seems to be aligning it. What am I missing here? (Ignore the data, that is just placeholder information)
Did you fix it already? It looks even in the center.
No, I did not. The bullet points are not perfectly aligned.
I am not quite sure what you want to achieve here. What do you mean exactly by “getting the UL even”?
EDIT: I think I see what you mean. Try playing around one of these two settings
ul {
list-style: inside;
}
OR
ul {
display: inline-block;
}
I tried that and it did not solve my issue. This is what I’m talking about. I cannot get these to line up evenly for the life of me.
Hey man, why don’t you try to give the div containing the <li> elements a width (maybe 200px) with margin-left and margin-right set to auto so it centers on your page? I see that you got the bullet points to line up. This will close the gap between the bullet points and your content, just that the border that you created will be very small.
You can fix that by adding another div as a parent to the tributeinfo div and styling the new div to have a border.
@gwenshiro has a valid solution to your problem.
Another approach might be to give the parent #tribute-info div a display: flex and then use the justify-content:center property on it. You can use text-align:left on the child UL.
1 Like
I tried styling a parent div before, didn’t seem to work. But I went with @LisaLoop’s suggestion. It works perfectly.
Oh my jeebus - thank you thank you thank you!! I liked this approach the best and it is working great. I probably need to go through the flexbox section again. I couldn’t really get it working before.
1 Like