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 但显示额外的水平滚动条。所以，我想用另一种方法。

score 1 · Accepted Answer

你只需要这个：

div{display: table; text-align: center; width: 100%; margin:0 auto}

score 1 · Accepted Answer

p更新元素的样式：

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

解释：

你的文本h1居中是因为h1元素继承了元素的text-align属性，div并且它的宽度等于元素的宽度div。

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

score 0 · Accepted Answer

利用

 margin-left:auto;  
 margin-right:auto;

p  
{
 width: 100px;  
 margin-left:auto;  
 margin-right:auto;
}

score 0 · Accepted Answer

p{width:100px;margin:0 auto;} 这将顶部和底部的边距设置为 0，但从左到右居中。

4 回答 4