Please help with center aligning my ul

[ComputerGuy]

I’m a Systems Administrator that’s trying to incorporate some HTML/CSS into some of my PowerShell report scripts. I’m fairly new to CSS, so I’ve watched some tutorials and went over some examples online. I have a base design of a menu that is almost where I want it, but I can’t center the menu. I’ve looked on the web, searched youtube videos, but I can’t incorporate the examples into my CSS.

Thanks in advance for any help.

See the Pen eyWBag by ComputerGuy (@TheComputerGuy) on CodePen.

https://production-assets.codepen.io/assets/embed/ei.js

[Shikkediel]

I think there are several ways to get there, of which display: inline-block on ul and text-align: center on the parent is probably easiest:

codepen.io/anon/pen/JMNWKQ

[ComputerGuy]

Thank you so much, that worked perfectly. I really appreciate it. I’m going to keep that as my base, and experiment on it so that I can understand it better. Again, thank you.

[Shikkediel]

No problem, it was a bit tricky because of the combination of a full width ul and li elements that are floated. The latter makes it hard to center the child elements – so I went for the parent. That needed the width: 100% removed so its size would adapt to that of the li children using display: inline-block. Then the last step was to center it through the parent, text-align being the designated option for centering inline elements.

Hope that explains it a bit more. Cheers.

[Author]

Posts