我正在创建一个简单的网站,我发现我可以居中 <img>
带有 text-align: center;
的标签但 id 不适用于像 <div>
这样的 block 元素例如。有人可以向我解释一下 text-align
到底是怎么回事吗?行得通吗,如果用它来对齐图像是上帝的做法吗?
非常感谢您:)
更新
我也知道 margin: 0 auto;
这在某些情况下有效,而在其他情况下它拒绝居中元素。
最佳答案
这完全取决于您的要求,有多种方法,一种是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
属性(property)是继承的。
那现在怎么办?对齐 p
left
的元素使用 text-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 height
和 width
你的img
通过使用 margin-top
和 margin-left
分别属性。如果您需要图像垂直居中和水平居中,此方法会派上用场。 (此方法需要声明固定的 height
和 width
)
关于html - 使用文本对齐使图像居中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19584027/