Question

我正在创建一个简单的网站，但我发现我可以将<img>标记与text-align: center;对齐，但id不适用于像<div>这样的块元素。有人可以向我解释text-align究竟是如何工作的，如果是上帝的做法，用它来对齐图像？

非常感谢您提前:)）

更新

我也知道margin: 0 auto;在某些情况下有效，而在其他情况下则拒绝将元素置于中心位置。

Answer 1

这完全取决于您的要求，有多种方法可以执行此操作，一个是img是inline元素，因此将其设置为block并使用{{1} } margin: auto; center

img

Demo

另一种方法是尝试尝试，需要在父元素上声明img { display: block; margin: auto; }而不是text-align: center;标记本身，因为我怀疑你使用的是img text-align: center;代码而不是父代...在上述解决方案中，我们定位img代码，因此两者之间存在差异。

Demo

这里有什么好处？

您不必将img设为img级元素。
无需block

这里有什么不好的地方？

如果margin: auto;中有p个元素，它们也将居中对齐，因为div属性是继承的。

Demo

那么现在该怎么办？使用align属性将p元素与left对齐，此处我们将定位text-align: left;

这会使图片保持居中，并将p与p

对齐

left

Demo

最后但并非最不重要，我们还可以使用 CSS定位，其中您可以将父元素设置为.wrap { text-align: center; } .wrap p { text-align: left; }，而我们使用position: relative;作为{{1} }}，而不是我们分配position: absolute;和img，而不是我们使用{我们top: 50%和left: 50%的总height和width的1/2分别为{1}}和img属性。如果您需要垂直和水平居中的图像，此方法很方便。（此方法需要声明固定的margin-top和margin-left）

Answer 2

<div>
 <img src="img.png">
</div>

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

Answer 3

我的建议是仅对文本使用text-align属性（当然可能有例外）。对于图像居中，您可以这样做：

img{
   display: block;
   margin: 0 auto;
}

没有声明宽度的'div'或任何块元素不能以margin: 0 auto;为中心，但图像会。 “自动”为您计算像素并使元素显示在中心

Answer 4

参见W3： http://www.w3.org/TR/CSS21/text.html#alignment-prop

是否要使用保证金：0自动;或者text-align：center，这实际上取决于你正在做什么以及周围的标记，上下文。

我总是尝试使用text-align：center;如果可能。我还将图像定义为有助于自动边距的块。

Chris也是CSS上的一篇精彩文章：http://css-tricks.com/centering-in-the-unknown/

Answer 5

属性text-algin:center基本上就是它所说的。它的假设居中文字。您可以直接应用于要居中的文本，也可以将其应用于父div。在这种情况下，此div中的每个文本将居中。

以图片为中心的更好做法是尽可能多地使用margin: 0 auto;。指定 auto 会告诉浏览器自动确定左边距和右边距并将它们设置为相等。因此，它保证两个边距具有相同的大小，这就是对象水平居中的原因。

希望有所帮助！

使用文本对齐居中图像

5 个答案: