vertical-align
CSS vertical-align Property
The CSS vertical-align property is used to specify the vertical positioning of inline child elements in relation to the height and line-height their parent element.
top •• bottom •• text-top •• text-bottom •• central •• middle
CSS CODE EXAMPLE
<style type="text/css">
#div1 span { vertical-align: sub; }
#div2 span { vertical-align: super; }
#div3 span { vertical-align: 25%; }
#div4 span { vertical-align: 25px; }
.divClass { line-height:2em; background: #C1E0FF; border:#09F 1px solid; height:50px; }
</style>
<div id="div1" class="divClass">
WE <span>LOVE</span> CSS
</div>
<hr />
<div id="div2" class="divClass">
WE <span>LOVE</span> CSS
</div>
<hr />
<div id="div3" class="divClass">
WE <span>LOVE</span> CSS
</div>
<hr />
<div id="div4" class="divClass">
WE <span>LOVE</span> CSS
</div>
#div1 span { vertical-align: sub; }
#div2 span { vertical-align: super; }
#div3 span { vertical-align: 25%; }
#div4 span { vertical-align: 25px; }
.divClass { line-height:2em; background: #C1E0FF; border:#09F 1px solid; height:50px; }
</style>
<div id="div1" class="divClass">
WE <span>LOVE</span> CSS
</div>
<hr />
<div id="div2" class="divClass">
WE <span>LOVE</span> CSS
</div>
<hr />
<div id="div3" class="divClass">
WE <span>LOVE</span> CSS
</div>
<hr />
<div id="div4" class="divClass">
WE <span>LOVE</span> CSS
</div>
WE LOVE CSS
WE LOVE CSS
WE LOVE CSS
WE LOVE CSS
Possible Values:
pixel amount •• percentage •• auto •• baseline •• sub •• supertop •• bottom •• text-top •• text-bottom •• central •• middle
0 Response to "vertical-align"
Post a Comment