The Basics of Centering Things Horizontally

If you want to center a box, use margin: auto.

<div style="border: solid 1px red; width: 400px; margin: 0 auto;">Center Box</div>

If you want to center the content inside of a box, use text-align: center.

<div style="border: solid 1px red; text-align: center;">Center Content</div>

If you want to center both, use both.

<div style="border: solid 1px red; width: 400px; margin: 0 auto;text-align: center;">Center Both</div>

Group Exercise

Take a look at Improving’s website. Look at the “Industry Experience” section. We are going to mimic the layout of that section. Take this as your starting point. Don’t worry about any of the styling except the layout.

Click here for a completed version of the Improving project