Ashley Elson
Ashley Elson
Front End Web Development Techdegree Student 5,972 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.

1 Answer

Kieran Barker
Kieran Barker
Full Stack JavaScript Techdegree Student 12,374 Points

Hi Ashley,

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 100%.

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!