CODEWITHSUNDEEP
htmlcss
AnchovyLegend
AnchovyLegend

Reputation: 12538

Centering divs and images, margin:0px auto 0px auto not working?

I am trying to create a table where one of the columns has a small 30px image in it, however, I am having a hard time figuring out how to center images/divs that are in other divs, tables, etc...

I am familiar with setting the margin to: "margin:0px auto 0px auto;" however this doesn't always work, and does not work in the example below. I was wondering if someone know of a way to center elements that works more consistantly? Or maybe if there is an explanation as to why my method does not work? The image is only 30px and the td element is 100px or even larger.

 <td><a href="#"><img src="images/globe.png" style="width:30px;"></a></td>

Upvotes: 1

Views: 762

Answers (2)

Umesh Aawte
Umesh Aawte

Reputation: 4690

For table you can use

<table border="1" cellpadding="0" width="100" height="100">
  <tr>
    <td align="center" >
        <a href="#">
           <img src="{IMG_SRC}" style="width:30px;">
        </a>
    </td>
  </tr>
 </table>

Here in this case, align="center" will work for the td tag.

For Div tag,

<Div style="width:100px;border:1px solid;line-height: 100px;text-align:center;">
    <a href="#">
      <img src="{IMG_SRC}" style="vertical-align: middle;width:30px;" >
    </a>
</div>

Here you have to add line-height: 100px;text-align:center; style for the div element where line height will be height of your div element. Also you have to add vertical-align: middle; to your img tag.

This should work.

Please refer working example

Note: I have added some extra styling like border etc can be removed. Also this solution will make image center vertically and horizontally also.

Upvotes: 0

xivo
xivo

Reputation: 2054

Have you tried? text-align: center;

http://jsfiddle.net/Eqed4/

Upvotes: 7

Related Questions