Question

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

我熟悉将保证金设置为：“保证金：0px auto 0px auto;”但是这并不总是有效，并且在下面的示例中不起作用。我想知道是否有人知道如何使中心元素更加一致地工作？或者，如果有解释为什么我的方法不起作用？图像仅为30px，td元素为100px甚至更大。

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

Answer 1

你尝试过吗？ text-align: center;

http://jsfiddle.net/Eqed4/

Answer 2

对于表格，您可以使用

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

在这里，您必须为div元素添加line-height: 100px;text-align:center;样式，其中行高将是div元素的高度。您还必须将vertical-align: middle;添加到您的img标记中。

这应该有用。

请参阅工作example

注意：我添加了一些额外的样式，如border等可以删除。此解决方案也将使图像中心垂直和水平。

居中的div和图像，保证金：0px auto 0px auto不工作？

2 个答案: