Question

我桌子上的物品不是中心。我仍然是初学者，并且知道这些天使用桌子是不好的做法，但我觉得我应该从头开始。我有2个项目，我想在同一行的屏幕中间居中。目前，图像位于左侧。

<table>
  <tr align="center">
  <td>
    <a href="http://sourceforge.net/">
      <img src="Resource/download.png">
    </a>
 </td>

 <td>
   <a href="http://sourceforge.net/">
     <img src="Resource/info.png">
   </a>
 </td>

 </tr>
</table>

Answer 1

只是将其作为一个单独的答案发布，因为使用属性进行样式化的惯例是多么可怕。不要永远使用属性进行样式设置。见the MDN attributes list。查看属性名称旁边的所有拇指？他们的意思是：'不要使用此属性'。它仍然有效，但它太可怕了。与使用center等弃用标签一样，使用已弃用的属性只是一个非常糟糕的习惯。 MDN文章提到了如何实现与使用属性所做的相同的事情，但没有弃用的HTML。

在这种情况下，请使用：

<table style="width:100%;border:1px solid black;">

和

<tr style="text-align:center;">

最后的小提琴是this。

Answer 2

贾丁给了你一个解决方案，但他没有解释。您的align属性设置正确且有效，但该表只与其内容一样宽。文本按照您的意图在表格中居中，但表格本身不居中。由于默认情况下该表是左对齐的，因此它看起来不是居中的。

特别是作为初学者，你应该尝试以正确的方式做事。如果你早点采用好的做法，以后会更容易。对于你想要做的事情，表格是错误的。

进入的一个重要习惯是将您的内容（如文本和图片）放入HTML中，并将控制其外观的所有代码放入CSS中。虽然align属性有效（在HTML 4中），但这意味着您将控制外观的内容放入HTML中。 border和width属性也是如此。

这是你应该如何控制表格的外观：

HTML

<table>
<tr>
  <td>
    <a href="http://sourceforge.net/"><img src="Resource/download.png"></a>
  </td>
  <td>
    <a href="http://sourceforge.net/"><img src="Resource/info.png"></a>
  </td>
</tr>
</table>

CSS

table {
  border: 1px solid gray;
}
td {
  border: 1px solid gray;
  text-align: center;
}

更好的方法可能是这样的：

HTML

<a href="http://www.google.com">Google</a>
<a href="http://www.yahoo.com">Yahoo</a>

CSS

a {
    display: block;
    width: 50%;
    float: left;
    text-align: center;
}

如果您想要的中心不仅仅是几个链接，您可能希望将其放入块或段落中。

我在CodePen上添加了一些内容，展示了如何完成此操作的一些示例：http://codepen.io/Ghodmode/pen/iaEvh

Answer 3

Working Fiddle

小变化：

<table width="100%" border="1">

不会居中

3 个答案:

HTML

CSS

HTML

CSS