在DIV中居中对齐图像

Question

Although this question is asked before, my problem is little different. I have a div, within which I have two images. First image needs to be stayed left align, where as the second image needs to be center aligned. The div has no fixed width, so that it covers the heading. I have created a fiddle, which can be found here .

Any suggestion will be very helpful to me.

Answer 1

Case 1

Add text-align:center to the div class.

Give float:left to the first image by using pseudo class so that your second image will be center aligned to the div and first image will be left aligned.

Here is the demo http://jsfiddle.net/Eevpc/5/

Case 2

Do it by position:absolute

.brandLogo {
    margin: 15px; background-color:red; text-align:center; position:relative;
}   

a img:first-child {
    border: 0 none; position: absolute; left:0;
    height: auto;
    vertical-align: middle;
}
img {
    border: 0 none; margin:0 auto !important;
    height: auto;
    vertical-align: middle;
}

Demo http://jsfiddle.net/Eevpc/11/

In case 1, second image is center for the remaining width of the div (ignoring the space occupied by the first image).

In case 2, second image is aligned to the exact center of the original div width. ​

Answer 2

Hope this will work.

.div_class{
   display: block;
   margin-left: auto;
   margin-right: auto;
}

Thanks

Answer 3

Try this:

<div id="main" style="text-align:center; width:100%;">
  <div id="left" style="float:left;">
    <img src="..." alt="..."/>
  </div>
  <div id="right" style="float:right; width:100%; text-align:center;">
    <img src="..." alt="..." style="margin:0 auto;" />
  </div>
  <div style="clear:both; content:'.'; display:none" />
</div>