CODEWITHSUNDEEP
htmlcss
Chris
Chris

Reputation: 6246

CSS vertical align inside a min-height container?

I've been doing a lot of searching and can't find a css solution to vertically align my content.

All of the solutions I see here on SO and the top articles on google require that I have a fixed height container which the content cannot exceed. I cannot guarantee that as the content is dynamically generated.

The only fallback I have that I can make work is some javascript to programmatically measure the inner container and set its margin-top. This is truly icky but the only way that seems to work. :(

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

I am happy to forget IE6 for this, but need to support IE7+ and the latest webkit+firefox...

Is anyone aware of a CSS only solution to this?

Upvotes: 7

Views: 17715

Answers (4)

Edu Ariño Pelegrín
Edu Ariño Pelegrín

Reputation: 11

This is my first answer, but hopefully it helps!

* {
  font-size: 9px;
}

#container{
    border: 3px solid black;
    text-align:center;
    min-height: 200px;
}

.valign_outer{
}

.valign_inner{
  padding-top: calc( (200px - 9px) * 1.2) ;
  padding-bottom: calc( (200px - 9px) * 1.2);
}

You can set any font-size.

You can set any min-height.

You can choose the padding-multiplier that best suits you.

You may redo this calculations for different Media Queries.

The calculation is: calc( (min-width - font-size) * padding-multiplier )

Make sure the padding multiplier is at least 0.5 on both.

This is the logic:

When you set a fixed height or a vh height, it is tricky: either the font-size always resizes not to overflow the height, or on smaller widths, you would get line-breaks and text may overflow the height.

And font-resize is not always best: we may want some CSS locks: see https://fvsch.com/css-locks/

So, we cannot determine the height of the container. But, we can define the min-height.

So, the text is going to occupy some size, and to center it, we want the same padding-top and padding-bottom

Now, that padding is better defined based on the font-size. If font is 20px, make the padding 20px maybe, but if font is 40px, make padding 40px, for example.

Also, we have to account for remaining space. If min-height is 200, the text is at least font-size high. It may be more, if there are line breaks, but if font-size is 16px, at least the text occupies 16px vertically.

So out of 200, we have 200 - 16 = 184 pixels available at most, to divide into our padding-top and padding-bottom.

You have to make sure the padding is at least ((min-width - font-size) / 2) to account for this scenario!

Hope it helps!

Upvotes: 1

Samiullah Khan
Samiullah Khan

Reputation: 894

The @ptriek answer is good but if you also want to get the center horizontal alignment than you need to have an extra wrapper and set it as

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

Upvotes: 2

Mark Rummel
Mark Rummel

Reputation: 2940

Here is a CSS-only approach using the HTML your provided on jsfiddle. It does require two wrapper DIVS around your content, but you already had that in your HTML. This solution does not use tables or table cells, but DIVS that act like tables and table cells using CSS.

Here is your jsfiddle modified and working: 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;
}

This is a modified solution using what I learned about vertical alignment using the Table Cell Method from a Smashing Magazine article.

Upvotes: 2

ptriek
ptriek

Reputation: 9286

As far as I know there is absolutely no way to get this done in IE7 with just CSS, unless you can live with a table. For all decent browsers, and IE8, you can use display:table-cell:

http://jsfiddle.net/hGjfY/

and

  • set height to 200px instead of min-height (min-height is not supported on table cells, 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)

  • load jQuery fix only for IE7, or live with a non-centered view in IE7

Upvotes: 13

Related Questions