当以 html 和 css 为中心时,我发现了两种方法 - 要么应用于元素:
display:block;
margin:0 auto;
或使用:
display:inline-block;
text-align:center; (on the parent element)
我总是想知道哪个更好,为什么。谢谢!!
原文由 user2335065 发布,翻译遵循 CC BY-SA 4.0 许可协议
当以 html 和 css 为中心时,我发现了两种方法 - 要么应用于元素:
display:block;
margin:0 auto;
或使用:
display:inline-block;
text-align:center; (on the parent element)
我总是想知道哪个更好,为什么。谢谢!!
原文由 user2335065 发布,翻译遵循 CC BY-SA 4.0 许可协议
3 回答4.9k 阅读✓ 已解决
5 回答2k 阅读
2 回答1.9k 阅读✓ 已解决
1 回答3k 阅读✓ 已解决
3 回答2.5k 阅读
3 回答2.1k 阅读
2 回答1k 阅读✓ 已解决
这是一个经典而重要的问题。
元素可以是内联的(意味着它们彼此相邻 - 就像一个 span 标签)或者它们可以是块状的(意味着堆叠在彼此之上 - 就像一个 div 标签)。
Margin: auto,虽然当你第一次看到它时有点奇怪,但它是最好的也是唯一的居中块级别(位置静态)的方法,元素。
对于 display: inline 的任何内容(如 span 标签)- 将其居中的 唯一 方法是在父级上指定 text-align: center 。这将使所有 display: inline 居中,即 position: static;
Display: inline-block 是两者的混合体, 相对较 新(但如果您使用另一个答案中提到的 hack,则最早支持 ie7)。使用内联块,您可以获得内联的好处,因为您可以将一堆东西彼此相邻并让它们全部居中(想想所有导航项目都居中的导航),但也有每个item 利用 display: block 获得的一些东西 - 最重要的是 HEIGHT。
想象这样一个场景,每个导航项都有一个 80 像素高的背景图像——你不能让一个内联元素的高度为 80——所以你必须让每个元素显示:块——只有这样你才能给它一个高度。因此,为了使它们彼此相邻出现,您需要将它们浮动。问题是如果你浮动它们,你不能让它们都在页面上居中,除非你给导航和边距一个固定的宽度:auto THAT。这意味着导航具有固定宽度 - 可能没问题,但有时导航必须具有动态元素,不同语言的不同宽度等。
输入显示:内联块。