vertical align center with fluid height

[james438]

This may not be possible with css.

We have the following:

<div style="height:1000px;">
<div style="float:left;width:100%;"><img src="test.jpg"></div>
<div style="float:left;width:100%;padding-top:50%;">test</div>
</div>

As the window size of the browser is altered the image will change size, but the overall height will remain an absolute 1000px. Since the image is changing height and the height of the child divs are not set the top div with image will take up a greater or lesser percentage of the parent div with the lower div with text taking up the remainder of the parent div height.

What I am trying to get is the text to be vertically aligned even as the height of the divs change with the resizing of the browser window.

Is this even possible? I have not seen it anywhere nor have I had any luck in creating this.

[Deadweight]

Do you have an example somewhere? Like a website or some sort?

[james438]

I do have a website or three, but I have not seen this anywhere hence the last sentence of my first post . Still, it seems that this should be possible even if it is not. Javascript might be able to do this, but I'd rather it be done with css. Javascript is fine though I guess.

For fun here is some better sample code:

<div style="height:700px;width:20%;border: #000000 solid 2px;background-color:green;">
<div style="float:left;width:100%;background-color:red;"><img src="/images/alita1.jpg" style="opacity:0.0;filter:alpha(opacity=0);width:100%;"></div>
<div style="position:relative;float:left;width:100%;">I would like this to be vertically centered.</div>
</div>

With a test page. Try resizing the browser window to see what I am trying to work with.

[Deadweight]

Yeah i know but its kinda hard to compare something to something that no one has seen =P
I mean y dont you show us something that is close to it

[james438]

See above.

I updated the code as well as the sample page and the following comes close:

<div style="height:700px;width:20%;border: #000000 solid 2px;
background-color:green;">
<div style="float:left;width:100%;background-color:red;">
<img src="http://www.animeviews.com/images/alita1.jpg" 
style="opacity:0.0;filter:alpha(opacity=0);width:100%;"></div>
<div style="float:left;width:100%;padding:25% 0%;vertical-align:middle;">
Not centered yet.</div>
</div>

[jscheuer1]

The vertical-align property is for inline content (things like img, input, span, and a tags in their native display mode) and table cells (td & th tags) only.

It varies as to its meaning depending upon whether it's an inline element or a table cell. With inline elements, it's simply a relativistic property. It sets the vertical position of the element in relation to othet inline elements, if any on the same line. If there are none, it has no effect, and it has no effect upon the elements postion within a block level container like a div, or upon a block level element's content. It's this last that you seem to want.

You could do this with a table because with a table cell it actually aligns the vertical position of the content within the table cell. And, in theory at least, you could set the div's display property to table-cell. But I don't think that's very cross browser. And even if it is, probably has other consequences (in at least some browsers) for the layout that you may not want.

You can always forget about vertical-align and use positioning instead. If you know the height of the content you want to vertically center, you may set it to position absolute within a relative positioned container and give it a top property of 50% and a negative margin-top property of half its height.

If you don't know the height, that could be where javascript would come in. It can calculate that for you.

But the simplest method would be to use a table.

[james438]

If I remove vertical align I get the same result. What is interesting is that setting the padding to 25% appears to set the padding for the text to 25% of the current height (or width?) of the image, so when the window is resized with the mouse by clicking the border of the window and moving it left and right across the screen so as to resize the window the padding is adjusted appropriately. This is good for square images and less so for rectangular images.

I hope the above makes sense.

Using the vertical align in my title is just a way to describe what I am trying to accomplish. I have tried manipulating the actual property of vertical-align by setting line-height to a percentage of the image height, but without much luck. I have also tried setting the the display to table cell, etc, but without much luck.

All in all, it sounds like I need to go with javascript here.

I'm gonna put this aside for now. Thanks for your help.

[jscheuer1]

This is actually one of the cases where I'd make an exception for the general rule of thumb to avoid tables:

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
table, td {
	height: 400px;
}
td {
	vertical-align: middle;
	border: 1px solid #000;
}
</style>
</head>
<body>
<table>
<tr>
<td><div>I'm in the middle vertically</div></td>
</tr>
</table>

</body>
</html>

[james438]

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<table style="width:20%;border: #000000 solid 2px;height: 700px;">

<tr style="width:100%;"><td style="vertical-align:top;background-color:green;">
<img src="/images/alita1.jpg" style="opacity:0.9;filter:alpha(opacity=0);width:100%;"></td></tr>

<tr style="width:100%;"><td style="clear:both;
vertical-align: top;border: 1px solid #000;background-color:red;">
I'm in the middle vertically</td></tr>

</table></body></html>

I am using Opera. It has been a while since I have used HTML. I altered the code you posted to reflect the unknown height of the two cells. The overall height of the table IS known though. For some reason when setting the height of the table the first cell uses all of the height.

[jscheuer1]

You're not really using vertical-align there. If those were divisions, they would align top, that's what divisions do. So this no longer qualifies as an exception to the best practices rule of avoiding tables when possible.

I played around with it, and - best I can figure for what I think you're after:

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
  <div style="width: 20%; border: #000 solid 2px; height: 700px;">
    <div style="height: 50%; background-color: green;">
      <img src="/images/alita1.jpg" style="display: block; opacity: 0.9; filter: alpha(opacity=90); max-width: 100%; max-height: 100%;" alt="">
    </div>
    <div style="height: 50%; border: 1px solid #000; background-color: red;">
      I'm in the middle vertically
    </div>
  </div>
</body>
</html>

Notes:

The equivalent for opacity 0.9 in alpha opacity is 90, not 0. Using zero for either makes things invisible.

You had a clear in there. That's only for after floats, but there were no floats.

Setting the image's width to 100% is OK, as long as the proportional ratio of the height isn't greater than 350px (half the height (50%) of the outer container). Using max-width and height ensures the image will fit in the layout. But it might not always fill the width of its immediate parent. You could make its margin: 0 auto; to at least center it in those cases.

Making the image display: block; will save on potential problems - like images in their native inline display have added space at the bottom in many DOCTYPES, and don't accept margin, padding, perhaps other styles as expected in some browsers. Since you want it all the way across its parent, the line break this causes is meaningless - it would be there anyway, does nothing if there's no other content in its parent, and acts the same if the display were inline even if there were.