How can I vertically align elements in a div?

Question

I have a div with two images and an h1. All of them need to be vertically aligned within the div, next to each other. One of the images needs to be absolute positioned within the div.

What is the CSS needed for this to work on all common browsers?

<div id="header">
  <img src=".." ></img>
  <h1>testing...</h1>
  <img src="..."></img>
</div>

I made a list of all ways to vertical align..I am going to leave it here: jsfiddle.net/techsin/FAwku/1 — Muhammad Umer
– Muhammad Umer, Commented May 22, 2014 at 17:27
Here are two simple methods to center an element within a div, vertically, horizontally or both (pure CSS): stackoverflow.com/a/31977476/3597276 — Michael Benjamin
– Michael Benjamin, Commented Aug 20, 2015 at 15:24
margin-top: auto and margin-bottom: auto (Works for alot of cases). — CrippledTable
– CrippledTable, Commented May 13, 2020 at 23:46

Joe · Accepted Answer · 2012-05-04 20:53:44Z

-8

<div id="header" style="display: table-cell; vertical-align:middle;">

...

or CSS

.someClass
{
   display: table-cell;
   vertical-align:middle;
}

Browser Coverage

edited May 4, 2012 at 20:53

Joe

82.9k18 gold badges130 silver badges147 bronze badges

answered Sep 17, 2008 at 3:01

dimarzionist

18.7k4 gold badges25 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Quentin Over a year ago

The vertical-align property does not apply since the div is display: block by default and nothing appears to have been done to change it.

MSpreij Over a year ago

Apparently the display was updated to table-cell, which makes vertical-align: middle; work. Even better, it works without needing a nested wrapper/buffer div, and it works for both text and images (or both), and you don't need to change the position properties.

SwiftMango Over a year ago

This one works. It changes the display to table-cell which takes the vertical-align property. No idea why people vote this down.

Pma Over a year ago

yes, as far as i know this is the least intrusive way to center anything verticaly in a div. +1

Pma Over a year ago

Ok, maybe i was too quick with my conclusions... Adding display:table-cell breakes div margin and additionaly border is displayed outside div, border combined with border-radius displays rounded corners inside of the div istead of outside

|

Collectives™ on Stack Overflow

How can I vertically align elements in a div?

31 Answers 31

6 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

31 Answers 31

6 Comments

Linked

Related