![](/img/trans.png)
[英]Floated box with top-left margin with vertically aligned and font-size responsive text divs
[英]Vertically align text divs with responsive font-size within a div
我有这个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>
这是一个字形问题,这是由于黑色字形字符未沿字形块的左侧直接对齐。
如果您看到以下示例,则可以设置字形字符前面的字形块左侧是否有实际空间。
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>
这是一个字体设计问题,它是有意的,因此,字母不会自动聚在一起。
空间量与字体大小和每种字体成正比,因此没有单个值可用于对齐它们。
适用于一种字体的内容不适用于另一种字体。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.