为什么p标签中的文字无法设置vertical-align：middle？

Question

div{
    width:300px;
    height:70px;
    border:1px solid red;
    font-size:30px;
    line-height:70px;
    vertical-align:middle; 
    text-align:center;
    padding:0px;
    margin:0px;
}

<div>
    hello world
</div> 

文本hello world在垂直和水平方向都处于中心状态。 现在只需为hello world添加一个p标记，上面的css没有其他任何更改。

div{
    width:300px;
    height:70px;
    border:1px solid red;
    font-size:30px;
    line-height:70px;
    vertical-align:middle; 
    text-align:center;
    padding:0px;
    margin:0px;
}

<div>
    <p>hello world</p>
</div> 

Answer 1

如果您打开浏览器的代码检查器，您会注意到p标记有margin-top和margin-bottom。

为什么？
在大多数浏览器中，p标记在顶部和底部边距上都有默认值1em，这会导致这种结果：

div {
  width: 300px;
  height: 70px;
  border: 1px solid red;
  font-size: 30px;
  line-height: 70px;
  vertical-align: middle;
  text-align: center;
  padding: 0px;
  margin: 0px;
}

/* I added a background to make it visual */
p {
  background: rgba(0,0,0,0.1);
}

<div>
  <p>hello world</p>
</div>

⋅ ⋅ ⋅

因此，您唯一需要做的就是将margin设置为0以便按照您的需要进行渲染：

div {
  width: 300px;
  height: 70px;
  border: 1px solid red;
  font-size: 30px;
  line-height: 70px;
  vertical-align: middle;
  text-align: center;
  padding: 0px;
  margin: 0px;
}

/* This is the only thing I added */
p { 
  margin: 0px;
}

<div>
  <p>hello world</p>
</div>

希望它有所帮助。

Answer 2

您可以使用vertical-align和display: table来使display: table-cell工作：

div{
    width: 300px;
    height: 70px;
    border: 1px solid red;
    font-size: 30px;
    display: table;
}

p{
    text-align: center;
    display: table-cell;
    vertical-align: middle;
}

<div>
    <p>hello world</p>
</div> 

或者，您可以使用display: flex：

div{
    width: 300px;
    height: 70px;
    border: 1px solid red;
    font-size: 30px;
    display: flex;
    align-items: center;
}

p{
    width: 100%;
    margin: 0;
    text-align: center;
}

<div>
    <p>hello world</p>
</div> 

您也可以使用position: absolute，但在使用时请注意，因为它可能会弄乱您的布局：

div{
    width: 300px;
    height: 70px;
    border: 1px solid red;
    font-size: 30px;
    position: relative;
}

p{
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
}

<div>
    <p>hello world</p>
</div> 

Answer 3

将margin: 0设置为p代码

＆＃13;

＆＃13;

div{
    width:300px;
    height:70px;
    border:1px solid red;
    font-size:30px;
    line-height:70px;
    vertical-align:middle; 
    text-align:center;
    padding:0px;
    margin:0px;
}
p {
  margin: 0;
}

＆＃13;

<div>
    <p>hello world</p>
</div> 

＆＃13;

＆＃13;

＆＃13;