Vertically central content within a dynamic height div

Question

Possible duplicate:
The vertical center of the HTML element within the dynamic height div

I am currently developing a website for which I need to focus some content vertically. The design is pretty simple: a fixed height header (aligned to the left and always at the top of the page), and also under vertically centered images in a horizontal line (yes, horizontal scrolling, I know).

Ideally, I would like the vertical centering of the images based on the 100% height of the viewport — the heading (so that the dynamic height that prevents the content of the heading from overlapping).

An example website can be found at http://bit.ly/vl1XNY , which currently uses tables for layout. Used css and html I can also find there (of course).

I am aware of various solutions for centering the content vertically inside a container with a fixed height, but none of them worked for me because I use variable height and do not want to use absolute positioning (to prevent a match). I looked around and tried the table-cell solution, line-height and absolute positioning.

So far, the only solution that worked exactly as I expected was to use tables. But I would like to refrain from using them. Does anyone know of a valid css and html solution for this problem? Or at least a more elegant solution?

Answer 1

Voh, let's talk about the timing, I looked for such a solution just a few minutes ago and came across an article on this topic, you can read it all here: Centering in the unknown .

You can easily change your code to work like this:

CSS

#wrapper { background: none repeat scroll 0 0 blue; height: 100%; text-align: center; } #wrapper:before { content: ""; display: inline-block; height: 100%; vertical-align: middle; } .center { display: inline-block; padding: 10px 15px; vertical-align: middle; width: 460px; } 

HTML

 <div id="wrapper"> <div class="center"> <img src="images/a_1.jpg" alt=" "> </div> <div class="center"> <img src="images/a_2.jpg" alt=" "> </div> </div> 

Answer 2

You can try the following code:

 <div style="display:table-cell;"> <img src="..." style="... vertical-align:middle;"> <img src="..." style="... vertical-align:middle;"> </div> 

Please check the above code in the context of all HTML:

 <style type="text/css"> html, body {height:100%;} body { margin:0; padding:0; } #header { height:1.7em; } #content { display:table-cell; vertical-align:middle; height:500px; } </style> <div id="header"></div> <div id="content"> <img src="..." style="... vertical-align:middle;"> <img src="..." style="... vertical-align:middle;"> </div> 

This will only work with a fixed table-cell height, which can be achieved by calculating the current viewport height using javascript