IMG src two images align to div center

Question

<div class="box">
        <img src="http://s21.postimg.org/c5lw89577/Untitled_2.jpg" />
        <img src="http://s21.postimg.org/c5lw89577/Untitled_2.jpg" />
        <p>
            uspendisse potenti. Ut id justo libero, in bibes 
        </p>
  </div>

jsfiddle sample

How to make images src align to center. the result I'd like to get is to like the picture below. ideally works on IE7 and IE8 as well

Answer 1

HTML <img> elements are inline level elements, so they are affected by the text-align property.

Paragraphs are block level elements, so they won't wrap around the images unless you use CSS to change that. All you need is this: ( http://jsfiddle.net/7sKeA/ )

.box {
    width:600px;
    text-align:center;
}
img {
    margin:5px;
}

If you then also need the .box to remain centered, target it with a margin:auto; like so: ( http://jsfiddle.net/7sKeA/1/ )

.box {
    width:600px;
    text-align:center; /* center align the text inside the box */
    margin:auto; /* center this .box element, assuming it is block-level */
}
img {
    margin:5px;
}