Question

I have centered a div inside another div but want to left justify the contents of the centered inner div. How can I do this?

My current HTML looks like this:

<div style="border: solid 1px #ff0000;text-align:center;">     
  <div style="border:solid 1px #00ff00;">
      <img src="/some_url_1/" style="width: 80px; height 80px; border: 0"/>
      <img src="/some_url_2/" style="width: 80px; height 80px; border: 0"/>
  </div>
</div>

Currently the images are centered inside the inner div but I would like them aligned to the left inside of the centered inner div.

Any idea what I’m missing?

Answer 1

Use margins to center the inner element:

<div id="outer">
    <div id="inner">
        Things to align to the left
    </div>
</div>

With the following CSS:

#inner {
    width: 75%;
    margin: 0 auto;
    text-align: left; /* generally don't need to explicitly state this */
}

Demo: http://jsfiddle.net/W95Qy/

Also, as a friendly suggestion, try as much as possible to keep CSS out of your HTML. It will generally make your code easier to read, manage, and preserve your long-term sanity in working in this field 😉