html - 使用文本对齐使图像居中

Question

我正在创建一个简单的网站，我发现我可以居中 <img>带有 text-align: center; 的标签但 id 不适用于像 <div> 这样的 block 元素例如。有人可以向我解释一下 text-align 到底是怎么回事吗？行得通吗，如果用它来对齐图像是上帝的做法吗？

非常感谢您:)

更新

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

Answer 1

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

img {
    display: block;
    margin: auto;
}

Demo

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

Demo

这里有什么好处？

• 您不必制作 img一个block水平元素。
• 不需要 margin: auto;

这里有什么不好的地方？

• 如果你有p div 内的元素, 它们也会居中对齐，因为 align属性(property)是继承的。

Demo

那现在怎么办？对齐 p left 的元素使用 text-align: left;属性，在这里我们将定位 p喜欢

这将使图像居中并对齐 p到 left

.wrap {
    text-align: center;
}

.wrap p {
    text-align: left;
}

Demo

---

最后但同样重要的是，我们还可以使用 CSS 定位，您可以将父元素设置为 position: relative;。比我们使用 position: absolute;对于 img标签，然后我们分配 top: 50%和 left: 50%然后我们扣除总数的 1/2 height和 width你的img通过使用 margin-top和 margin-left分别属性。如果您需要图像垂直居中和水平居中，此方法会派上用场。 (此方法需要声明固定的 height 和 width)