Question

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

使用margin: 0px auto;很容易使固定宽度的块元素居中。但是，如何将此p元素的宽度设置为完全包含其子元素，同时将其保持为block，这是边距工作所必需的？

HTML

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

CSS

div {
  width: 300px;
}

p {
  margin: 0px auto;
}

Answer 1

<强> Working jsFiddle Demo

p是block元素，当您输入另一个块元素时：

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

它的width将是父级的宽度（使用CSS，300px）。规则margin: 0 auto;或更明确，为auto和margin-left设置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;
}

enter image description here

检查jsFiddle demo。

Answer 2

使用text-align:center

Fiddle

p {
    text-align:center;
}

以可变宽度p元素为中心

2 个答案: