Geek Answers Handbook

CSS vertical alignment inside container with minimum height?

I searched a lot and can't find a css solution to vertically align content.

All the solutions that I see here in SO and the top google articles require that I have a container with a fixed height, the content of which cannot exceed. I can not guarantee that as the content is dynamically created.

The only reserve I have that I can do the work is some javascript to programmatically measure the inner container and set its margin-top. This is really bad, but this is the only way to work. :(

See this js fiddle for an example of the markup I want to create.

I'm glad to forget IE6 for this, but you need to support IE7 + and the latest webkit + firefox ...

Does anyone know only about CSS solution?

+5
source share
3 answers

As far as I know, it is absolutely impossible to do this in IE7 only with CSS if you cannot live with a table. For all decent browsers and IE8 you can use display: table-cell:

http://jsfiddle.net/hGjfY/

and

  • set the height to 200px instead of min-height (min-height is not supported in table cells, the height is interpreted as min-height)

  • add conditional comment to target only IE7 and add min-height: 200px; and height: auto; to the inner div (height doesn't work as expected in IE7 on table cells)

  • jQuery IE7 IE7

+10

CSS-, HTML-, jsfiddle. DIVS, HTML. , DIVS, CSS.

jsfiddle : http://jsfiddle.net/8Mjc3/2/

HTML

<div class="vertical-center-container">
  <div class="vertical-center-table-cell">
    <!-- INSERT CONTENT TO BE VERTICALLY ALIGNED -->
  </div>
</div>

CSS

.vertical-center-container {
    display: table;
    width:100%;
}
.vertical-center-table-cell {
    display: table-cell;
    vertical-align: middle;
}

, , , Cell Cell Smashing Magazine.

+1

@ptriek , ,

.outer{ 
    display: table; 
    width: 100%
}
.inner{
    diplay: table-cell;
    vertical-align: middle;
    height: 200px;
    text-align:center;
}
+1

More articles:


All Articles