1

我正在尝试创建一个表格，其中一个列中有一个 30px 的小图像，但是，我很难弄清楚如何将其他 div、表格等中的图像/div 居中...

我熟悉将边距设置为：“margin:0px auto 0px auto;” 但是，这并不总是有效，并且在下面的示例中也无效。我想知道是否有人知道一种更一致地居中元素的方法？或者如果有解释为什么我的方法不起作用？图片只有30px，td元素是100px甚至更大。

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