Posts Tagged ‘vertical center using css’
- In: CSS | Tutorials
- Leave a Comment
Well all of us might be knowing how to align a text or an image at the bottom when you are using a table. Just say vertical-align:bottom; this will work out. But when you are working with div’s this woun’t work out. So for this to work we need to give the div’s some special treatment. The down below code will get you the this working in the div’s.
HTML code :
<div id=”outerLogo”>
<div id=”innerLogo”>
<div id=”logo”>
<a href=”index.htm” title=”Ideaken”><img src=”images/logo.gif” alt=”alt text” border=”0″ /></a>
</div>
</div>
</div>
CSS code :
<style type=”text/css”>
#outerLogo {
width:220px;
height:140px;
}
#innerLogo {
width:220px;
height:100%;
position:relative;
}
#logo {
position:absolute;
bottom:0;
left:0;
}
</style>
With this the logo div with position absolute and bottom as 0 makes it to get align at the bottom. The relative positioned div inherits its height from its parent.
This code is checked with the mozilla, IE – 6 and IE -7.
Related to this post:
Vertical align Div Center
Vertically centering in CSS
Posted on: April 24, 2009
- In: CSS
- Leave a Comment
Most of us might have seen when working with divs valign doesn;t seem to work. So to make it align exactly vertically align center we normally make use of padding-top and padding-bottom property. Rather then using this there is another solution for this. Try using the below code:
<div id=”outerdiv” class=”border”>
<div id=”middlediv”>
<div id=”innerdiv” class=”border”>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
</div>
</div>
</div>
<style type=”text/css”>
#outerdiv { height:400px;overflow: hidden; position: relative;}/* for explorer only */
#outerdiv[id] {display: table; position: static;}/* other than IE */
#middlediv {position: absolute; top: 50%;} /* for explorer only */
#middlediv[id] {display: table-cell; vertical-align: middle; position: static;}/* for other than IE */
#innerdiv {position: relative; top: -50%}
.border {border: 1px solid #666666; }
</style>
Related to this
Vertical Align Div Bottom
Mywebdunia's Blog 