Question

我有一个网站，我使用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>

这就是它的全部。为什么所有其他图像都在中心，但不是这个？

Answer 1

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;
}

Answer 2

不要在text-align标记上使用img，而是在div标记上使用它：

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

Answer 3

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

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

Answer 4

您可以使用自动边距：

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

更多阅读：w3

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

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

来自here

Answer 5

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

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

文本对齐不能与img一起使用

5 个答案: