0

如何在 div 中居中可变宽度 p 元素？

使用 . 使固定宽度的块元素居中很容易margin: 0px auto;。但是我怎样才能设置这个 p 元素的宽度以精确地包含它的子元素，同时保持它作为block边距工作所必需的？

HTML

<div>
 <p>Center me</p>
</div>

CSS

div {
  width: 300px;
}

p {
  margin: 0px auto;
}
4

2 回答 2

1

工作 jsFiddle 演示

p是一个block元素，当你放入另一个块元素时：

<div>
    <p>Center me</p>
</div>

其中width，将是父级的宽度（使用您的 CSS，300px）。规则margin: 0 auto;或更明确，设置auto为margin-leftand margin-right，将元素本身放在父元素的中心。

所以当parent和child具有相同的宽度时，它是没有意义的。

如果需要，您可以使用text-align属性将其中的文本居中，在您的情况下，您可以将其margin用于您的div元素（例如，如果它的父元素是body）：

<body>
    <div>
        <p>Center me</p>
    </div>
</body>

在 CSS 中：

div {
    width: 300px;
    margin: 0 auto;
}

p {
    text-align: center;
}

您也可以将您的p元素设置为inline-block并text-align: center;为父级制作：

body {
    background: gray;
}

div {
    margin: 0 auto;
    width: 300px;
    background: yellow;
    text-align: center;
}

p {    
    display: inline-block;
    background: pink;
}

在此处输入图像描述

于 2013-06-12T06:22:02.763 回答
0

采用text-align:center

小提琴

p {
    text-align:center;
}
于 2013-06-12T06:17:41.907 回答