我有这个 div :
我尝试使用此代码使文本的字体大小响应:
font-size:calc(xx + 1.5vw);
如果我将屏幕变小，标题将不会垂直对齐:
HTML:
<div id="topsection">
<div id="header1">HEADER 1</div>
<div id="header2">Header 2</div>
</div>
CSS:
#header1 {
margin-left:220px;
font-size:calc(20px + 1.5vw);
color:#fff;
}
#header2 {
color: #fff;
margin-left:220px;
font-size:calc(9px + 1.5vw);
}
#topsection {
background-color:#222939;
width:100%;
height:75px;
z-index:1;
position:absolute;
top:10px;
left:0;
color:white;
}
我试过像这样更改标题的 CSS:
#header1 {
display: inline-block;
vertical-align: middle;
margin-left:220px;
font-size:calc(20px + 1.5vw);
color:#fff;
}
#header2 {
display: inline-block;
vertical-align: middle;
margin-left:220px;
font-size:calc(9px + 1.3vw);
color: #fff;
}
但现在看起来像这样:
最佳答案
您需要一个内容 div 居中。请参见下面的示例。仅在 Chrome 中对此进行了测试。
.toolbar{
background-color:#222939;
width:100%;
height:195px;
line-height:195px;
z-index:1;
position:absolute;
top:0;
left:0;
color:white;
}
.toolbar .content{
display:inline-block;
vertical-align: middle;
}
.toolbar .title {
line-height:1;
font-size:calc(20px + 1.5vw);
color:#fff;
}
.toolbar .subtitle {
line-height:1;
font-size:calc(9px + 1.5vw);
color: #fff;
} <div class="toolbar">
<div class="content">
<div class="title">HEADER 1</div>
<div class="subtitle">Header 2</div>
</div>
</div>最终代码
<!DOCTYPE html>
<html>
<head>
<style>
.toolbar{
background-color:#222939;
width:100%;
height:195px;
line-height:195px;
z-index:1;
position:absolute;
top:0;
left:0;
color:white;
}
.toolbar .content{
display:inline-block;
vertical-align: middle;
}
.toolbar .title {
line-height:1;
font-size:calc(20px + 1.5vw);
color:#fff;
}
.toolbar .subtitle {
line-height:1;
font-size:calc(9px + 1.5vw);
color: #fff;
}
</style>
</head>
<body>
<div class="toolbar">
<div class="content">
<div class="title">HEADER 1</div>
<div class="subtitle">Header 2</div>
</div>
</div>
</body>
</html>
关于html - 在 div 中垂直对齐具有响应字体大小的文本 div，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38635932/