使用 Line-Height 进行 CSS 居中 [重复]

Posted 2023-03-05

【中文标题】使用 Line-Height 进行 CSS 居中 [重复]

【英文标题】：CSS Centering by using Line-Height [duplicate]

【发布时间】：2022-01-08 01:35:51

【问题描述】：

我不明白为什么段落和 div 元素之间有间隙，下面是我的代码。我是 CSS 新手。

.center 
      line-height: 200px;
      height: 200px;
      border: 3px solid green;
      text-align: center;
     
.center p 
display: inline-block;
vertical-align: middle;
background-color: green;

 <div class="center">
    <p>I am vertically and horizontally centered.
    </p>
 </div>

【问题讨论】：

如果没有更多关于你想要做什么的信息，很难给出最好的答案。 p 标签默认有边距，所以如果您在.center p 上设置margin: 0;，那么它会按照您的预期显示。在这种情况下，您不需要 vertical-align: middle;。

@Temani Afif 这段代码有两个问题。 margin 应该设置为 0，并且 line-height 应该进入 p 而不是 div。所以这不是重复的。

谢谢，Michael，我刚刚按照你说的做了，是的，差距变小了，但是仍然存在一个非常窄的差距......为什么？

移除垂直对齐并添加边距：0

@MichaelHaddad 这是重复的，因为真正的问题是使文本居中，而我们有大量重复的问题。 margin:0 是一个子问题

【参考方案1】：

您的段落在浏览器默认情况下具有顶部边距。将其设置为 margin-top: 0;不会有差距。

【讨论】：

谢谢，我已经按照你说的做了。差距变得更小了，但是边框和段落之间仍然存在狭窄的差距......

将这个添加到 .center div: width: fit-content;