html - 如何将中心对齐到子 div 具有固定宽度的页面

Question

我有如下 html...

<div>
    <h1>centered text</h1>
    <p>some text</p>
</div>

和CSS....

div{display: table; text-align: center; width: 100%;}
p{width: 100px;}

在上面的代码中，h1 居中而不是 p。我试过使用 margin-left: 50% to outer div 和 left: -50% to inner div 但显示额外的水平滚动条。所以，我想用另一种方法。

Answer 1

更新p元素的样式:

p{width: 100px; margin: 0 auto}

Demo here

解释:

h1 的文本居中，因为 h1 元素继承了 div 的 text-align 属性> 元素及其宽度等于 div 元素的宽度。

您的 p 元素也继承了中心文本对齐方式，但它只有 100px 长度并且具有默认位置属性，所以整个 p元素粘贴在父 div 的左侧。您必须设置 p 元素的左右边距，以使 整个 p 元素在 div 中居中>.