1

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>
4

2 に答える 2

7

やってみました？text-align: center;

http://jsfiddle.net/Eqed4/

于 2012-06-22T20:21:34.887 に答える
0

使用できるテーブルの場合

<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>

この場合、align="center"td タグで機能します。

Divタグの場合、

<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>

line-height: 100px;text-align:center;ここで、行の高さが div 要素の高さになる div 要素のスタイルを追加する必要が あります。vertical-align: middle;また、img タグに追加する必要があります。

これはうまくいくはずです。

作業例を参照してください

注:境界線などを削除できるなど、いくつかの余分なスタイルを追加しました。また、このソリューションは、画像を垂直方向および水平方向にも中央に配置します。

于 2012-06-22T20:39:59.623 に答える