0

I have a div with dynamic height (its height depends on the image it contains).

And now I split the div into two part (up and down with 50% height).

So the div height will change according to the div width.

I want to make the up and down splitting div to align middle vertically, but the display: table-cell; vertical-align: middle; approach seemed doesn't work here.

http://jsfiddle.net/fish_ball/MhY3M/

Need your help!

HTML mark up:

<div id="outer">
    <img id="inner-back" src="http://www.google.cn/landing/cnexp/google-search.png" />
    <div id="inner-up">upper-text</div>
    <div id="inner-down">upper-down</div>
</div>

CSS stylesheet:

#outer {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
}
img#inner-back {
    width: 100%;
}
#inner-up {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 50%;
    background-color: blue;
    opacity: 0.5;
    color: white;
    text-align: center;
    display: table-cell;
    vertical-align: middle;
}
#inner-down {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 50%;
    background-color: green;
    opacity: 0.5;
    color: white;
    text-align: center;
    display: table-cell;
    vertical-align: middle;
}
Alfred Huang
  • 17,654
  • 32
  • 118
  • 189
  • possible duplicate of [How do I vertically align text next to an image with CSS?](http://stackoverflow.com/questions/489340/how-do-i-vertically-align-text-next-to-an-image-with-css) – Paulie_D Jun 12 '14 at 15:23
  • maybe have a look at: http://css-tricks.com/centering-in-the-unknown/ – HJ05 Jun 12 '14 at 15:41
  • I tried to use vertical-align in the fiddle, but cannot make it, can you plz help me to make it in fiddle? – Alfred Huang Jun 12 '14 at 15:44
  • I understand your question now, after playing with your code a bit. Is the Google image permanent? It will not change in size? Would you mind using a bit of javascript? – TimSPQR Jun 12 '14 at 20:32
  • Here's a fiddle that adjusts the size of the overlying divs, and uses padding top to put the text down. Not sure how it would be affected by a change in picture size. - http://jsfiddle.net/MhY3M/1/ – TimSPQR Jun 12 '14 at 23:33
  • @TimSPQR Thank you, but that's not exactly my wanted. I want the image can change width and height on demand, and the text always stay at center-middle. But you fixed the image size here. – Alfred Huang Jun 13 '14 at 15:32
  • Anyway, I give up to make it with pure css, and turned to a javascript solution. Thank you all the way, friends! – Alfred Huang Jun 13 '14 at 15:32

0 Answers0