0

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

4

4 回答 4

1

你只需要这个:

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

演示 http://jsfiddle.net/xfGh2/

于 2013-07-18T09:24:42.147 回答
1

p更新元素的样式:

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

演示在这里

解释:

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

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

于 2013-07-18T09:23:37.463 回答
0

利用

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

p  
{
 width: 100px;  
 margin-left:auto;  
 margin-right:auto;
}
于 2013-07-18T09:24:07.743 回答
0

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

在此处链接到 CodePen

于 2013-07-18T09:25:58.720 回答