使元素用不同的字体大小填充同一行空间
使元素用不同的字体大小填充同一行空间
提问于 2018-09-11 03:00:41
我想让这些元素用不同的字体大小填充相同的行空间。正如您所看到的，第一个元素“设置了行高的标准”。以下所有元素的上下都有空格。不管字体大小，我希望所有元素填充相同的空格(行高的%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>
回答 2
Stack Overflow用户
发布于 2018-09-11 03:12:30
您可以为所有人设置相同的行高，并将垂直对齐设置为居中：
.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>Stack Overflow用户
发布于 2018-09-11 03:04:30
一个想法是使用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;
}<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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/52263926
复制相关文章
相似问题