Ashley ElsonFront End Web Development Techdegree Student 3,625 Points
How do I center floated list items?
Hi, I working on Unit 2 on the Front-End TechDegree and I'm having a little issue. I can't seem to center these list items that I have floated to the left. Does anyone know the answer or can help me?
I need the black boxes centered in the blue box.
Kieran Barker4,638 Points
You have two main options!
If you give each inner floated element a width of
45%, for example, you can apply a margin of
2.5% on every side. This will then add up to
If you don't need to float the elements, another option would be to give the inner elements
display: inline-block; and apply
text-align: center; to the parent element.
I made this quick CodePen to demonstrate what I mean: https://codepen.io/kieranbarker/pen/VyBLvP
I hope this helps!