Vertically Aligning Divs

Question

Hi, i'm trying to make a small username and password input box. I would like to ask how do you vertically align a div?

What i have is a

<div id="Login" class="BlackStrip floatright">
<div id="Username" class="floatleft">Username<br>Password</div>
<div id="Form" class="floatleft">
<form action="" method="post">
<input type="text" border="0"><br>
<input type="password" border="0">
</form>
</div>
</div>

and how can i make the div with id Username and Form to vertically align itself to the center? I tried putting

vertical-align: middle;

in css for the div with id Login. But doesn't seem to work. Any help would be appreciated. Thanks.

Answer 1

I've had some trouble with this in the past. This great site (which I found again by searching) helped me through it:

Understanding vertical-align, or "How (Not) To Vertically Center Content"

Answer 2

divs can't be vertically aligned that way, you can however use margins or position:relative to modify its location.

Answer 3

If you know the height, you can use absolute positioning with a negative margin-top like so:

#Login {
    width:400px;
    height:400px;
    position:absolute;
    top:50%;
    left:50%;
    margin-left:-200px; /* width / -2 */
    margin-top:-200px; /* height / -2 */
}

Otherwise, there's no real way to vertically center a div with just CSS

Answer 4

if you are using fix height div than you can use padding-top according your design need. or you can use top:50%. if we are using div than vertical align does not work so we use padding top or position according need.