将文本 div 与 div 内的响应式字体大小垂直对齐答案

【问题标题】：Vertically align text divs with responsive font-size within a div将文本 div 与 div 内的响应式字体大小垂直对齐
【发布时间】：2016-12-02 19:41:01
【问题描述】：

我有这个 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;
}

但现在看起来像这样：

【问题讨论】：

请关注CSS Tricks - Centering in CSS: A Complete Guide。请不要使用calc。
您可能需要将行高设置为与高度相同。我会在几分钟内做一个例子。
@RichardLindhout 我做到了，但它对两个标题都不起作用
@Praveen Kumar 这不是同一个问题。我有两个文本 DIVS，它不适用于行高。
@RichardLindhout 它被关闭的原因是因为他们认为它是重复的。但在这种情况下，我有 2 个具有响应式文本大小的 div。 :) 管理员很快，问题又回来了。

标签： html css vertical-alignment font-size

【解决方案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>

【讨论】：

我测试了你的。它在 sn-p 上工作正常，但当我保存文件并在 chrome 上打开时它不起作用
嗯..你确定你有相同的html和css吗？
是的。完全一样。
它有效。是否可以在没有的情况下使其工作？我无法在平台上粘贴此代码。答案是正确的！
你在哪个平台上？

【解决方案2】：

这是字体字形问题，是因为黑色字形字符没有直接沿字形块的左侧对齐。

如果您看到下面的示例，您可以在字形字符之前设置字形块左侧的实际空间。

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>

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

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

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

【讨论】：