...

View Full Version : Advanced help with Vertically Centering Div?



Anakratis
09-14-2011, 04:54 AM
Hey everyone,

So I tried a crap load of methods online to vertically center my Div, but none of them worked! I already have it horizontally centered, but not vertically...

Any help is appreciated.

I'm trying to vertically center ".center".



<style type="text/css">
.center
{
margin:auto;
width:1024px;
}
.center2
{
width:1100px;
height:540px;
border:none;
overflow:scroll;
}
#apDiv2 {
position:relative;
width:50px;
height:30px;
z-index:0;
left: 611px;
top: 0px;
}
body {
background-color: #000;
}
</style>

alykins
09-14-2011, 03:08 PM
typically alignment vertical is difficult to do and is not really meant for block level elements. What you can do (and I have tinkered with this method before) is set the parent element to be display table cell and then (I think) you have to set the object to display inline... so example
CSS...


.tcell
{
height:100px;
width:100px;
display:table-cell;
vertical-align:center;
}
.center
{
display:inline;
margin:auto;
}


html


<div class="tcell">
<div class="center"></div>
</div>


Note: This is very fussy. Vertical align was designed for images, and not block elements. Also the vertical align (to the best of my knowledge) vertically aligns the inline element with regards to text (so omit text in the tcell div). I cannot guarantee this will work, but it should- it probably wont be cross browser clean though and for earlier IE's I'd bet money it won't work.

An alternative method is to have the parent be a fixed height and then use margins or a hidden div to occupy the top space and force the "centered" div below

Anakratis
09-14-2011, 06:58 PM
Thanks for the help guys!

I was able to find my own way of doing it after hours of frustrating failed attempts.


The following code works for my Div size, so if you are going to use it for your own site, make sure you play around with the width and height properties. ;)



<style type="text/css">
.center
{
margin:auto;
width:1024px;
height: 624px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -512px;
margin-top: -312px;
}
.center2
{
width:1045px;
height:412px;
border:none;
overflow-y:scroll;
overflow-x:hidden;
}
#apDiv2 {
position:relative;
width:50px;
height:30px;
z-index:0;
left: 611px;
top: 0px;
}
body {
background-color: #000;
}

</style>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum