Question

我试图在一条线上获得三张图像，一张左对齐，一张居中，最后一张右对齐。我已经决定使用单行表来完成它，但我很难让图像在各自的单元格中居中。

有没有比我选择的更好的方式呢？我不打算使用<td align="center">属性，因为它已在HTML5中弃用，所以我正在寻找一种使用CSS的方法。这就是我目前所拥有的（我已将表格边框属性设置为＆＃39; 1＆＃39;因此我可以看到单元格中的图像对齐方式如何呈现）：

<style>
  .centre_image
  {
  float:center;
  }
</style>

<body>
<table border="1">
    <tr>
    <td class="centre_image">
        <object type="image/svg+xml" data="images/lawfirms.svg">   
          <img src="images/lawfirms.png" alt=""/>     
        </object>
    </td>
    <td class="centre_image">
        <object type="image/svg+xml" data="images/industry.svg">     
          <img src="images/industry.png" alt=""/>     
        </object>
    </td>
    <td class="centre_image">
        <object type="image/svg+xml" data="images/in-house.svg">     
          <img src="images/in-house.png" alt=""/>     
        </object>
    </td>
    </tr>
</table>

这在Ubuntu的Firefox 19.0中给出了以下结果： enter image description here

以及Chrome 25.0中的以下结果： enter image description here

编辑 - 在j08691回答中提到的更改后，这是完整的HTML：

<!DOCTYPE html>     
<html xmlns="http://www.w3.org/1999/xhtml">     
<head>
<meta charset="UTF-8"/>     
<title>SVG Included with <object> tag</title>

<style>
.centre_image
{
text-align:center;
}
</style>
</head>

<body>
<table border="1" style="width:100%">
    <tr>
    <td class="centre_image">
        <object type="image/svg+xml" data="images/lawfirms.svg">   
          <img src="images/lawfirms.png" alt=""/>     
        </object>
    </td>
    <td class="centre_image">
        <object type="image/svg+xml" data="images/industry.svg">     
          <img src="images/industry.png" alt=""/>     
        </object>
    </td>
    <td class="centre_image">
        <object type="image/svg+xml" data="images/in-house.svg">     
          <img src="images/in-house.png" alt=""/>     
        </object>
    </td>
    </tr>
</table>

 </body>
</html>

这是Naresh Kumar的答案的结果： enter image description here

Answer 1

由于没有float:center属性，您是否尝试过text-align:center？

.centre_image {
    text-align:center;
}

<强> jsFiddle example

Answer 2

尝试类似：

.centre_image{
    text-align:center;
    margin-left:auto;
    margin-right:auto;
}

我希望这会对你有帮助。

Answer 3

在HTML5中，不推荐使用vAlign。这是一个提示，将所有三个图像放在侧面li标签中。在CSS中分配一个属性显示：li标签的内联块。

Answer 4

有很多方法可以做不到。特别是'浮动：中心'。

我fiddled an example在这里另一个fiddle with basic .css重置

由于您想要在TD标签中居中，您可以简单地对齐它。

<td align="center">

但是你会注意到'align'属性被'弃用'，你会被建议使用CSS代替。为此，其他人已经向您展示了答案

.centre_image {
    text-align:center;
    vertical-align:middle;
}

如果您的元素没有“浮动”

，这个CSS将会有效

P.S。 “弃绝”不是邪恶的。

P.S。 w3school在StackOverflow上有一个not so good reputation。

将图像置于单行表中

4 个答案: