Put "innerText" to be middled

<div style="height:200px;background-color:yellow;[COLOR="blue"]vertical-align:top[/COLOR]">
outerText
  <div style="height:100px;background-color:pink;[COLOR="Red"]vertical-align:middle[/COLOR]">
    innerText
  </div>
</div>

I have the code above in http://dot.kr/x-test/vertical.php .

How can I make the vertical position of “innerText” to be escape from vertical-align:top set in “outerText div” and
put the position of “innerText” to be vertically middled in “innerText div”?

Although you should no use styles within your html, try to add this to the inner div


display:table-cell;

I’m not sure, but I think table-cell is not widely supported.

Another option:

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title></title>
        <style type="text/css">
 
            #outerDiv{
                height: 200px;
                background-color: yellow;
                position: relative;
            }
 
            #innerDiv {
                 background-color: pink;
                position: absolute;
                top: 50%;
                margin-top: -50px;/* half of #innerDiv height*/
                left: 0;
                height: 100px
            }
 
        </style>
    </head>
    <body>
 
        <div id="outerDiv">
            outerText
            <div id="innerDiv">
                innerText
            </div>
        </div>
 
    </body>
</html>

Hi,

How can I make the vertical position of “innerText” to be escape from vertical-align:top set in “outerText div” and
put the position of “innerText” to be vertically middled in “innerText div”?

If you wanted the text vertically aligned within that 100% wide strip then you’d need to do something like this.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
p {    margin:0;}
.outer {
    height:200px;
    background-color:yellow;
}
.inner {
    height:100px;
    background-color:pink;
}
.inner span,.inner b {
    vertical-align:middle;
    display:inline-block;
}
.inner b {height:100%;}
</style>
</head>
<body>
<div class="outer">
    <p>outerText</p>
    <p class="inner"> <span>innerText innerText innerText innerText innerText innerText innerText innerText innerText innerText innerText innerText innerText innerText innerText innerText innerText innerText innerText innerText innerText innerText innerText</span><b></b></p>
</div>
</body>
</html>


If you just wanted to center one word within a 100px high element then you could just set the line-height to the same as the height for that element and the text will centre vertically centred (however you cannot use that method if the text wraps and you’d need the first method I have shown.)

Note that vertical align only applies to elements that are inline, inline-block or table cells. It does not apply to block elements so is is superfluous to both the divs in your code and does nothing.:wink: