...

View Full Version : vertical align using css -> how?



Crisium
05-09-2009, 07:31 AM
Hi all,

Vertical align seems to almost impossible using css? (perhaps my lack of knoweldge).

Can anyone tell me how I get the text/content in the div_left to be vertically aligned?

thanks,
Peter


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<meta http-equiv='Content-Type' content='text/html;charset=iso-8859-1' />
<title>Test</title>
<head>
<style type="text/css">

.div_box
{
border: 2px red solid;
width: auto;
}

.div_outer
{
width: 500px;
border: 1px solid Gray;
margin: auto;
padding: 2px;
padding-bottom: 2px;
}

.div_content
{
font-family: Verdana,Tahoma,Arial,Sans-Serif;
font-size: 10px;
width: auto;
border: 0;
margin: 0;
padding: 0;
background-color: lightblue;
}

.div_left
{
width: 100px;
height: 50px;
border: 0;
border-right: 1px white solid;
border-bottom: 1px white solid;
margin: 0;
padding: 0;
background-color: darkgray;
float: left;
}

.div_right
{
width: auto;
height: 50px;
border: 0;
border-bottom: 1px white solid;
margin: 0;
padding: 0;
background-color: yellow;
}



</style>

</head>
<body>

<!-- red box that surrounds the entire div_outer -->
<div class="div_box">

<!-- this is what we want to center at some point (not right now) -->
<div class="div_outer" >
<div class='div_content'>

<!-- left side stuff -->
<div class="div_left">
Left Side
</div>

<!-- right side stuff -->
<div class="div_right">
Right Side
</div>
</div>

<div class='div_content'>

<!-- left side stuff -->
<div class="div_left">
Left Side
</div>

<!-- right side stuff -->
<div class="div_right">
Right Side
</div>
</div>

</div>

</div>

</body>
</html>

abduraooft
05-09-2009, 08:20 AM
Try

.div_left
{
width: 100px;
height: 50px;
line-height:50px;
border: 0;
border-right: 1px white solid;
border-bottom: 1px white solid;
margin: 0;
padding: 0;
background-color: darkgray;
float: left;
}

Crisium
05-09-2009, 08:22 AM
to abduraooft,

your method is using a hardcoded 50px value...
I know my example has hardcoded values but they are there just for making the problem visible.

the content I have has variable height.. so I need a dynamic solution.

any suggestions
Peter

timgolding
05-09-2009, 11:24 PM
Hi

well as i understand it's not really possible for variable sizes with HTML/CSS alone. You should read this http://phrogz.net/CSS/vertical-align/index.html.



If you can accept the above necessities, the solution is:

1. Specify the parent container as position:relative or position:absolute.
2. Specify a fixed height on the child container.
3. Set position:absolute and top:50% on the child container to move the top down to the middle of the parent.
4. Set margin-top:-yy where yy is half the height of the child container to offset the item up.


You can use the above but would need JS to calculate what margin-top is needing to be. I have spent days on end searching for a similar solution and never found one.

Apostropartheid
05-10-2009, 02:35 AM
This might interest you, then:


<!doctype html>
<html lang="en">
<head>
<title>miaow</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
html {
font: 12px/1.8 'lucida grande', 'lucida sans unicode', sans-serif;
}
#container {
position: relative;
height: 100px; /* this can be left to the default, calculated height and is here for example purposes */
}
#content {
position: absolute;
top: 50%;
}
#content p {
position: relative;
top: -50%;
}
</style>
</head>
<body>
<div id="container">
<div id="content">
<p>miaow</p>
</div>
</div>
</body>
</html>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum