使元素以不同的字体大小填充相同的行空间答案

【问题标题】：Make elements fill the same line space with different font sizes使元素以不同的字体大小填充相同的行空间
【发布时间】：2019-02-15 06:00:30
【问题描述】：

我想让这些元素用不同的字体大小填充相同的行空间。如您所见，第一个元素为行高“设置了标准”。以下所有元素的上方和下方都有空白。无论字体大小如何，我都希望所有元素都填充相同的空间（行高的 %100）。有人知道吗？谢谢！

    body{ 
        background-color: #ffffff;
        background-size: cover;
        border: 5px solid yellow;
        margin: 0px;
        padding: 0px;
    }
    
    .head1{
        text-align: center;
        display:inline-block;
        background-color: cornflowerblue;
        border: 5px solid black;
        padding: 0px;
        margin-right: 0px;
        margin-left: 0px;
        margin-top: 0px;
        margin-bottom: 0px;
    }
    
    #par1{
        display: inline-block;
        background-color: aqua;
        border: 5px solid pink;
        margin: 0px;
    }
    
    #par2{
        display: inline-block;
        background-color: crimson;
        color: #ffffff;
        border: 5px solid green;
        margin: 0px;  
    }

<h1 class="head1">Site title!</h1><p id="par1"> Here is some text! Format all this with HTML.</p><h2 class="head1">Header here.</h2><h2 class="head1">Another header.</h2><p id="par2">More paragraph text. Block vs inline? Position relative static, etc...</p>

【问题讨论】：

标签： css text-size

【解决方案1】：

你可以为所有设置相同的行高，并将垂直对齐设置为中间：

.head1, #par1,#par2{
  line-height:28px;
  vertical-align:center;
}

如果由于某种原因（必须处理未知字体大小）你不能这样做，你可以将你的项目放在一个包装器中并使用 flexbox：

.head1, #par1,#par2{
  display: flex;
  align-items: center;

}
.wrap{
  display:flex;
  flex-wrap: wrap;
}

<div class="wrap">

    <h1 class="head1">Site title!</h1>
    <p id="par1"> Here is some text! Format all this with HTML.</p>
    <h2 class="head1">Header here.</h2>
    <h2 class="head1">Another header.</h2>
    <p id="par2">More paragraph text. Block vs inline? Position relative static, etc...</p>

</div>

【讨论】：

【解决方案2】：

一个想法是使用 flexbox 并依靠拉伸效果，但您应该调整对齐方式。

body {
  background-color: #ffffff;
  background-size: cover;
  border: 5px solid yellow;
  margin: 0px;
  padding: 0px;
  display:flex;
  flex-wrap:wrap;
}

.head1 {
  text-align: center;
  display: inline-flex;
  background-color: cornflowerblue;
  border: 5px solid black;
  padding: 0px;
  margin-right: 0px;
  margin-left: 0px;
  margin-top: 0px;
  margin-bottom: 0px;
}

#par1 {
  display: inline-flex;
  align-items:center;
  background-color: aqua;
  border: 5px solid pink;
  margin: 0px;
}

#par2 {
  display: inline-flex;
  align-items:center;
  background-color: crimson;
  color: #ffffff;
  border: 5px solid green;
  margin: 0px;
}

<h1 class="head1">Site title!</h1>
<p id="par1"> Here is some text! Format all this with HTML.</p>
<h2 class="head1">Header here.</h2>
<h2 class="head1">Another header.</h2>
<p id="par2">More paragraph text. Block vs inline? Position relative static, etc...</p>

或者将所有元素的行高调整为最大的：

body {
  background-color: #ffffff;
  background-size: cover;
  border: 5px solid yellow;
  margin: 0px;
  padding: 0px;
  flex-wrap:wrap;
}

body > * {
  line-height:37px;
  vertical-align:bottom;
}

.head1 {
  text-align: center;
  display: inline-block;
  background-color: cornflowerblue;
  border: 5px solid black;
  padding: 0px;
  margin-right: 0px;
  margin-left: 0px;
  margin-top: 0px;
  margin-bottom: 0px;
}

#par1 {
  display: inline-block;
  align-items:center;
  background-color: aqua;
  border: 5px solid pink;
  margin: 0px;
}

#par2 {
  display: inline-block;
  align-items:center;
  background-color: crimson;
  color: #ffffff;
  border: 5px solid green;
  margin: 0px;
}

&lt;h1 class="head1"&gt;Site title!&lt;/h1&gt;&lt;p id="par1"&gt; Here is some text! Format all this with HTML.&lt;/p&gt;&lt;h2 class="head1"&gt;Header here.&lt;/h2&gt;&lt;h2 class="head1"&gt;Another header.&lt;/h2&gt;&lt;p id="par2"&gt;More paragraph text. Block vs inline? Position relative static, etc...&lt;/p&gt;

【讨论】：

啊。美丽的。谢谢！我喜欢 flex-wrap 解决方案。不过，您将如何对齐文本？
@comp1201 如您所见，我还制作了元素 inline-flex 并且在里面我使用了 align-items ......所以简单地调整这个值来控制对齐