Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Aug 2011
    Posts
    9
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Advanced help with Vertically Centering Div?

    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".

    Code:
    <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>

  • #2
    Senior Coder alykins's Avatar
    Join Date
    Apr 2011
    Posts
    1,662
    Thanks
    41
    Thanked 189 Times in 188 Posts
    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...
    Code:
    .tcell
    {
    height:100px;
    width:100px;
    display:table-cell;
    vertical-align:center;
    }
    .center
    {
    display:inline;
    margin:auto;
    }
    html
    Code:
    <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

    I code C hash-tag .Net
    Reference: W3C W3CWiki .Net Lib
    Validate: html CSS
    Debug: Chrome FireFox IE

  • #3
    New to the CF scene
    Join Date
    Aug 2011
    Posts
    9
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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.

    Code:
    <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>
    Last edited by Anakratis; 09-14-2011 at 06:01 PM.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •