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

Question

I have this div :

and I tried making the font-size of the text responsive using this code :

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

If I make the screen smaller the headers are not vertically aligned :

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

I tried changing the CSS for the headers like this :

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

but now it looks like this :

Please follow [CSS Tricks - Centering in CSS: A Complete Guide](https://css-tricks.com/centering-css-complete-guide/). And please don't use `calc`. — Praveen Kumar Purushothaman, Jul 28 '16 at 12:10
You might need to set to line-height the same as height. I'll make an example within a few minutes. — Richard Lindhout, Jul 28 '16 at 12:11
@RichardLindhout I did it but it did not work for both headers — Datacrawler, Jul 28 '16 at 12:12
@Praveen Kumar It is not the same question. I have two text DIVS and it does not work with the line-height. — Datacrawler, Jul 28 '16 at 12:18
@RichardLindhout The reason it was closed was because they thought it was a duplicate. But in this case I have 2 divs with responsive text-size. :) The admin was fast though and the question is back. — Datacrawler, Jul 28 '16 at 12:40
Related - http://stackoverflow.com/questions/36619423/why-text-with-different-size-have-different-alignment/36619698#36619698 — Paulie_D, Jul 28 '16 at 13:53
Possible duplicate of [How to vertically center a div for all browsers?](http://stackoverflow.com/questions/396145/how-to-vertically-center-a-div-for-all-browsers) — Datacrawler, Sep 02 '16 at 13:24

Richard Lindhout · Accepted Answer · 2016-07-28T13:53:02.313

1

You need a content div to center in the middle. See the example below. Have only tested this in 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>

Final code

<!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>

edited Jul 28 '16 at 13:53

answered Jul 28 '16 at 12:22

Richard Lindhout

2,038
2
23
38

I tested yours. It works fine on snippet but it does not work when I save the file and open in on chrome – Datacrawler Jul 28 '16 at 12:37
Hmm.. are you sure you have the same html and css? – Richard Lindhout Jul 28 '16 at 13:32
Yes. Exactly the same. – Datacrawler Jul 28 '16 at 13:46
It works. Is it possible to make it work without the though? I cannot paste this code on the platform. The answer is correct though! – Datacrawler Jul 28 '16 at 14:04
On which platform are you on? – Richard Lindhout Jul 28 '16 at 14:05
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/118553/discussion-between-richard-lindhout-and-apolo-radomer). – Richard Lindhout Jul 28 '16 at 14:07

Paulie_D · Answer 2 · 2016-07-28T13:54:47.890

This is a font glyph issue and is due to the fact that the black gylph character is not aligned directly along the left of the glyph block.

If you see the example below, you can set that there is actual space to the left side of the glyph block before the glyph character.

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>

This is a font-design issue...and it's on purpose...so that letters don't automatically bunch up together.

The amount of space is proportional to the font-size and each font so there's no single value you can use to align them.

What works for one font won't work for the next.

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

2 Answers2