14

I have 2 divs that I want to centre vertically inside another div. At the moment I have:

http://jsfiddle.net/5vpA3/1/

Now I understand what is going on here, but I want the left div to be vertically aligned within that container and the right div the same. But they are vertically aligning as a pair and not individually. I have tried various things but can't seem to get it work.

Sir Rippov the Maple
  • 7,491
  • 5
  • 42
  • 52
anothershrubery
  • 20,461
  • 14
  • 53
  • 98
  • Are they fixed height or variable height? – Michael Rose Apr 14 '11 at 10:03
  • They are all actually variable height. So basically, the container div will be the same height as the largest internal div and the smaller div should be vertically centered. If it is necessary the divs can be fixed height, but we don't really want to be setting margin-top, etc. – anothershrubery Apr 14 '11 at 10:26
  • I assume from your use of `display: table-cell` that you don't care about supporting IE7? – thirtydot Apr 14 '11 at 10:31
  • Hmm...IE7 compatibility is not high on the agenda. But it would be good to support it. A solution for IE7 and one for newer browsers would be good. Then we'll have a look at the best implementation. – anothershrubery Apr 14 '11 at 10:36

2 Answers2

24

Live Demo

  • Remove float: left from #left and #right.

  • Instead, use display: inline-block:

    #left, #right {
    display: inline-block;
    vertical-align: middle;
}
  • Due to using display: inline-block, you have to deal with the whitespace issue. I chose to remove the whitespace in the HTML between </div> and <div id="right">. See here for what happens if you don't do that. Removing the whitespace really is the easiest fix, but there are other ways.
Community
  • 1
  • 1
thirtydot
  • 224,678
  • 48
  • 389
  • 349
  • I chose to explain the `inline-block` whitespace issue so thoroughly based on your [previous question](http://stackoverflow.com/questions/5647365/images-have-gap-between-them). – thirtydot Apr 14 '11 at 10:39
  • Cheers for the explanation. I have tried this implementation in the actual SharePoint page and it doesn't seem to be working, although I can see what it should do from your fiddle. It's as if the divs are performing as blocks rather than inline-block. See http://jsfiddle.net/5vpA3/24/ for what it looks like on my page. The IE dev tools show it as having display:inline-block, so I don't see the problem. – anothershrubery Apr 14 '11 at 11:10
  • When you hit F12 and bring up the Developer Tools, what "Document Mode" is being used? – thirtydot Apr 14 '11 at 11:11
  • 1
    D'oh, it was displaying in compatibililty mode... >:( Working now! – anothershrubery Apr 14 '11 at 12:35
  • What if now you want the texts `LEFT` and `RIGHT` to be centered inside the blue and red boxes? – user765368 Nov 25 '12 at 18:58
  • @user765368: I see you've asked a few questions on Stack Overflow since you wrote that comment. Still need help? – thirtydot Nov 25 '12 at 23:33
6

Flexbox solution to center vertically:

#container {
    display: flex;
    align-items: center;
}

OP's original fiddle modified: http://jsfiddle.net/o3pmyb8c/

If you would like to also center horizontally you can add justify-content: center;

wdm
  • 7,121
  • 1
  • 27
  • 29