AtoZ CSS Screencast: Vertical-Alignment in CSS
This screencast is a part of our AtoZ CSS Series. You can find other entries to the series here.
Transcript
Vertical centering is a firm favorite of designers – for both print and digital media.
But aligning things vertically with CSS is not the easiest thing to do.
This issue is made worse in a world of multiple devices and responsive design as we need our elements to be flexible in height
– which can make calculating their vertical center quick tricky.
In this episode we’ll learn all about:
- The
vertical-align
property and how and when it works - A method for vertical aligning an element with a known
height
- And finally one approach for vertically centering elements with variable
height
.
vertical-align
The vertical-align
property only affects elements with their display
set to inline
, inline-block
or table-cell
.
It takes a length, percentage or keyword value.
Lengths and percentages align the baseline
of the element at that given distance above the baseline
of its parent.
Keyword values can be one of the following:
baseline
sub
super
text-top
text-bottom
middle
top
bottom
Most of these are quite intuitive but sub
aligns the baseline
to the parent’s sub-script baseline
and super
aligns the baseline
of the element to the parent’s super-script baseline
.
Let’s take a look at vertical-align
in a practical example.
I’ve got a grid of images and text here and all of them have different heights which means the text doesn’t all align neatly.
<div class="grid">
<img src="http://placebacn.com/200/400">
<h2>grilled bacon</h2>
</div>
<div class="grid">
<img src="http://placebacn.com/200/300">
<h2>tasty bacon</h2>
</div>
<div class="grid">
<img src="http://placebacn.com/200/200">
<h2>crispy bacon</h2>
</div>
<div class="grid">
<img src="http://placebacn.com/200/350">
<h2>bacon</h2>
</div>
We can set the grid containers to display:inline-block
and use vertical-align: bottom
on the images to make everything line up nicely.
If there was no text here and we wanted all the images to be vertically centered, we could use vertical-align: middle
and achieve quite a nice effect.
Vertical centering
In “Episode 12: line-height
“ we looked at line-height
and demoed one way to fake vertical centering for text.
If I wanted to center a whole container of multiple elements inside of another container, we’ll need a different approach.
I’ve got a container here with a dark background and a border around it. Inside is another, smaller box with a width
and height
set to give it some shape.
<div class="container">
<div class="box">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis
aperiam quidem minima a qui ipsa deleniti nisi modi nesciunt
dolores, consequatur dolorem, dignissimos debitis distinctio.
Voluptas eligendi fuga voluptatem eos.
</div>
</div>
If we know the height
of this box, we can use absolute positioning to vertically and horizontally center it within the container.
With position: relative
on the container, the box can be positioned absolutely within it. If we set the top
and left
properties to 50%
the box will be moved 50% away from the top and 50% away from the left, leaving the top-left corner of the box placed in the exact center of the container.
.container {
position: relative;
background: #444;
}
.box {
position: absolute;
top: 50%;
left: 50%;
width: 400px;
height: 200px;
margin: -100px 0 0 -200px;
color: #fff;
background: #cc3f85;
}
With a fixed width
and height
, we can set negative margins on the box; half the height
to the top and half the width
to the left. And now the box is centered in the container.
This technique works well but the downside is that all the widths are fixed – which means it’s not a great solution if working on a responsive project.
Fluid vertical center
We can accomplish vertical centering of fluid height
elements by combining knowledge of vertical-align:middle
and pseudo elements which we covered in “Episode 16: CSS Pseudo Elements“.
We’ll take the same example of a box inside a container from before, but this time, the subject box will be fluid.
The trick is to create an invisible element – using a pseudo element – that will be the full height
of the container and set it to inline-block
and vertical-align:middle
. We can then vertically center the inner box by also making it inline-block
and vertical-align: center
. It can be centered horizontally with text-align: center
.
.container {
height: 400px;
margin: 20px;
background: #444;
font-size: 0;
text-align: center;
}
.container:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
}
.box {
display: inline-block;
width: 50%;
padding: 2em;
border: 1px solid #000;
background: #cc3f85;
font-size: 1rem;
vertical-align: middle;
}
Now as the container box changes its width
, the percentage width
of the child box also changes, altering its height
– but the box remains vertically centered. Pretty sweet, eh?