3

我有一个网站，我使用text-align.

现在在我的主要内容div中，我试图居中img并且它不起作用。

<div id="Content" style="width:100%;position:absolute;overflow:auto;top:66px;bottom:200px;">
   <img src="myimg.png" style="text-align: center;" />
</div>

这里的所有都是它的。为什么所有其他图像都居中，但不是这个？

4

5 回答 5

3

text-align: center需要应用于父元素，在您的情况下，div：

<div id="Content" style="width:100%;position:absolute;overflow:auto;top:66px;bottom:200px;text-align: center;">
   <img src="myimg.png" />
</div>

虽然我强烈反对使用内联 CSS，但如果你有样式表，请将其移到那里：

#Content {
    width:100%;
    position:absolute;
    overflow:auto;
    top:66px;
    bottom:200px;
    text-align: center;
}

另一种方法是自动分配元素周围的边距，但这仅适用于块级元素：

#Content > img {
    display: block;
    margin: 0 auto;
}
于 2013-08-22T14:59:49.210 回答
1

不要使用text-alignonimg标签，而是在标签上使用它div：

<div id="Content" style="width:100%;position:absolute;overflow:auto;top:66px;bottom:200px;text-align: center;">
   <img src="myimg.png" />
</div>
于 2013-08-22T14:59:41.717 回答
1

文本对齐中心应该是您的 div 特征而不是 img。

<div id="Content" style=" text-align: center; width:100%;position:absolute;overflow:auto;top:66px;bottom:200px;">
于 2013-08-22T14:59:48.050 回答
1

您可以为此使用自动边距：

img {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

更多阅读：w3

或者，如果您知道图像的宽度：

img {
  position: absolute;
  left: 50%;
  margin-left: -(half ot the image width)px
}

从这里

于 2013-08-22T15:00:25.620 回答
1

避免使用内联 CSS，它们在网站上是不好的，因为搜索引擎会消极对待它，总是尝试为 CSS 使用不同的样式表。您可以使用溜冰场服务员提供的代码。

而 text-align 只能在块容器中使用

于 2013-08-22T15:38:50.217 回答