Question

我在这里看过W3Schools和几个主题，无论我做什么，这些图像链接都不会在其元素中心。我不能只是制作更小的，因为桌子中的一些图像几乎不适合它们的细胞。我想要水平居中，垂直放置图像和我看到的任何地方，以下就是如何做到这一点（嗯。水平。我认为一旦我把它拉直，我就会解决垂直居中问题。）

margin-left:auto;
margin-right:auto;
width: (some pixellage amount)

出于某种原因，这不适用于我的html / css。这是我试图居中的链接之一，以及引用它的css代码。

HTML

<table class = "displayTable"><tr>
<td class = "photodisplaytd chana">
<a href="chanasImages/Originals/animeApronOriginal.jpg"><img src="chanasImages/animeApron.jpg" onmouseover="this.src='chanasImages/animeApronBack.jpg'" onmouseout="this.src='chanasImages/animeApron.jpg'" alt = "Anime styled white apron, front with back image on mouse rollover."/></a>
</td>

CSS

.chana
{
margin-left: auto;
margin-right:auto;
width:50px;
}

.displayTable
{
alignment: right;
margin-left:auto;
margin-right:auto;
}


.photodisplaytd
{
border:4px solid slategrey;
background-color:#FFFFFF;
}

Answer 1

除了您需要的地方外，您的所有内容都有自动边距。 margin:auto为目标对象提供自动边距，使其在父节点中居中。

因此，您需要将margin:auto应用于您自己的链接（例如.chana a），而不是表格单元格或表格。它不是表格单元格的属性（就像旧的对齐属性一样），而是中心的东西。

此外，由于默认情况下a元素为inline elements，因此您必须使它们成为块元素才能拥有自动边距。您也可以通过向样式添加display: block来完成此操作。

我整理了一个快速demo fiddle，显示所有内容都按预期运行。

Answer 2

这是一个jsfiddle，它与旧式text-align：center一起使用;技术，在photodisplaytd：http://jsfiddle.net/C6Zux/2/

.photodisplaytd
{
    border:4px solid slategrey;
    background-color:#FFFFFF;
    text-align: center;
}

我也尝试用@ cincodenada的建议做到这一点，但可能犯了一些错误并且到目前为止失败了 - 声明现在在css中被注释掉了。

将标记内的图像链接居中

2 个答案: