PDA

View Full Version : Vertical Aligning a div



flynch01
Mar 1st, 2008, 05:29 AM
Ok, this is a (i'm sure) a very simple thing. And i'm sure your probably getting fed up of these questions. But you have to learn somehow. I've got a div 400px by 400px. I want the text to align to the left, but be centred vertically.



| |
|Here |
| |

I've tried:

vertical-align: center; -- CSS property

valign="center" -- HTML property

text-align: left center; -- CSS Property which i knew wouldn't work.

And i'm not sure how to do it :(

rangana
Mar 1st, 2008, 05:46 AM
Use CSS's line-height property.

Try adding line-height:400px; in your left div.

If it's not centered or has gone out of the center area,,feel free to play with the units.

See if it helps :D

flynch01
Mar 1st, 2008, 05:51 AM
Wow, that couldn't have worked better. Thanks + 1

rangana
Mar 1st, 2008, 05:52 AM
You're welcome!..Glad I could help :D

CitrusC
Mar 1st, 2008, 10:27 AM
There is a method using positioning as well, it works with relative & absolute positions, so you can create an elastic layout instead of trying to guess percentages for the line height.

HTML Code:

...
<link href="index.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div class="bigdaddy">
<div class="middleleft">
Text.
</div>
</div>
</body>
...


Linked CSS:

html, body {
height:100&#37;;
width:100%;
margin:0;}

.bigdaddy{
background-color:#003300;
position:relative;
height:50%;
width:50%;}

.middleleft{
background-color:#33FF00;
position:absolute;
top:50%;
left:0px;}

It's a very reasonable alternative should you ever need to create an elastic centre-left-aligned DIV.

Hope this helps!

EDIT: I've uploaded it to my playpen if you want to take a look - adjust the size of the window to see what I mean.
http://www.filesap.com/c/playpen/cvadiv/