0

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

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

<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 中给出了以下结果： 在此处输入图像描述

在 Chrome 25.0 中出现以下结果： 在此处输入图像描述

编辑 - 这是在 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 回答的结果： 在此处输入图像描述

4

4 回答 4

3

由于没有float:center财产，你试过text-align:center吗？

.centre_image {
    text-align:center;
}

jsFiddle 示例

于 2013-03-14T16:33:25.847 回答
0

尝试类似：

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

我希望这会对你有所帮助。

于 2013-03-14T16:34:45.657 回答
0

在 HTML5 中，不推荐使用 vAlign。这是将所有三个图像放在侧 li 标签中的提示。并在 CSS 中为 li 标签分配一个属性 display: inline 块。

于 2013-03-14T16:37:15.847 回答
0

有很多方法不能使它正确。特别是'浮动：中心'。

我在这里摆弄了一个例子，在此处摆弄了一个基本的 .css重置

由于您想在 TD 标签中水平居中，您可以简单地对齐它..

<td align="center">

但是你会注意到'align' 属性是'deprecated' 并且建议你改用CSS。为此，其他人已经向您展示了答案

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

只要您的元素不是“浮动”的，这个 CSS 就可以工作

ps 'DEPRECATED' 并不邪恶。

ps w3school在 StackOverflow 上的名声不太好。

于 2013-03-14T17:03:31.667 回答