在 div 中将文本 div 与响应式 font-size 垂直对齐

Question

我有这个 div :

我尝试使用以下代码使文本的 font-size 响应：

font-size:calc(xx + 1.5vw);

如果我将屏幕变小，headers 不会垂直对齐：

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 更改为 headers，如下所示：

#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;
}

但现在看起来像这样:

Answer 1

您需要一个内容 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>

Answer 2

这是一个字体字形问题，是由于黑色字形字符没有直接沿着字形 块[=] 的左侧对齐33=].

如果你看到下面的例子，你可以在字形块之前的字形左侧设置实际的space字符.

h1, h3 { margin: 0; margin-bottom: 1px; margin-left: 150px; font-family: monospace; } h1 { font-size: 144px; } h3 { font-size: 72px; } span { background: red; }

<H1><span>H</span></H1> <H3><span>H</span></H3>

这是一个字体设计问题...这是故意的...这样字母就不会自动聚在一起。

space 的数量与字体大小和 每种字体 成正比，因此没有可用于对齐它们的单一值。

适用于一种字体的方法不适用于另一种字体。

在 div 中将文本 div 与响应式 font-size 垂直对齐

Vertically align text divs with responsive font-size within a div

html

css

font-size

vertical-alignment