Line things up inside the header

01 / 04

The text clings to the top

Even with the header set to 64px tall, the text inside stays up near the top.

You want it halfway down the band, but you have not met an instruction for "put it in the middle". So what now?

02 / 04

Match the line height to the box height

line-height sets how tall one line is.

Text sits in the middle of its line, so if you make the line as tall as the box, the text ends up halfway down as a result.

.header {  height: 64px;}.logo {  line-height: 64px;}

03 / 04

The same trick works on the menu

Put the same value on the li items you set in a row and the logo and the menu come out level.

The knack is to write the same number as the height of the band. Let the numbers drift apart and things drift up or down with them.

.menu li {  float: left;  line-height: 64px;}

04 / 04

In body text, use a multiplier

line-height also takes a plain number with no unit. Then it means how many times the text size.

font-size: 16px with line-height: 2 gives you a line 32px tall. When you want writing to read easily, this is the form you reach for. Have a go.

.text {  font-size: 16px;  line-height: 2;}