2

我正在创建一个简单的网站，我发现我可以<img>将标签居中，text-align: center;但 id 不适用于块元素<div>，例如。有人可以向我解释一下text-align它的工作原理以及使用它来对齐图像是否是上帝的做法？

非常感谢你:)

更新

我也知道margin: 0 auto;在某些情况下哪个有效，而在其他情况下它拒绝居中元素。

4

5 回答 5

4

这完全取决于您的要求，有多种方法可以做到这一点，一种是它img是一个inline元素，因此将其设置为block并使用margin: auto;您center的img

img {
    display: block;
    margin: auto;
}

演示

另一种方式是您尝试尝试的方式，需要text-align: center;在父元素而不是img标签本身上声明，因为我怀疑您使用text-align: center;的是img标签而不是父...在上述解决方案中我们的目标标签，所以两者img之间有区别..

演示

这里有什么好处？

  • 您不必制作img一个block级别的元素。
  • 不需要margin: auto;

这里有什么不好的地方？

  • 如果您在p内有元素div，它们也将居中对齐，因为该align属性是继承的。

演示

那么现在该怎么办呢？将p元素与leftusingtext-align: left;属性对齐，在这里我们将定位p为

这将保持图像居中，并将对齐p到left

.wrap {
    text-align: center;
}

.wrap p {
    text-align: left;
}

演示

最后但并非最不重要的一点是，我们还可以使用CSS 定位，您可以将父元素设置为position: relative;和position: absolute;用于img标记，然后我们分配top: 50%和，然后我们通过使用和减去总和的left: 50%1/2分别属性。如果您需要图像垂直居中和水平居中，此方法会派上用场。（此方法需要固定并声明）heightwidthimgmargin-topmargin-leftheightwidth

于 2013-10-25T07:53:53.157 回答
1 
<div>
 <img src="img.png">
</div>

img {
    display: block;
    margin-left: auto;
    margin-right: auto;
}
于 2013-10-25T07:47:20.167 回答
1

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

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

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

于 2013-10-25T07:52:22.663 回答
1

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

是否要使用 margin:0 auto; 或 text-align:center ，这实际上取决于您正在做什么以及周围的标记，上下文。

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

Chris 在 CSS 技巧上的一篇很棒的文章：http: //css-tricks.com/centering-in-the-unknown/

于 2013-10-25T07:57:07.847 回答
1

该物业text-algin:center基本上按照它所说的去做。它应该居中文本。您可以直接应用于要居中的文本，也可以将其应用于父 div。在这种情况下，此 div 中的每个文本都将居中。

将图像居中的更好做法是使用margin: 0 auto;许多人已经建议的方法。指定auto告诉浏览器自己自动确定左边距和右边距并将它们设置为相等。因此，它保证两个边距具有相同的大小，这就是对象水平居中的原因。

希望有帮助！

于 2013-10-25T07:57:46.617 回答