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 2 of 2
Like Tree1Likes
  • 1 Post By sunfighter

Thread: Vertically aligning Div regardless of browser size.

  1. #1
    New to the CF scene
    Join Date
    Apr 2014
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Vertically aligning Div regardless of browser size.

    Hi, i have researched into this extensively, looked all possible ways and past threads regarding this issue and i still cant seem to fix the problem regarding my site.

    I have a div in the centre containing a few more divs, text and images, and i want this entire div to be centered both vertically and horizontally regardless of browser size.

    Currently i am using the standard position:absolute, set height and width and then set left and top margins to half those values, however my div is half off the page page vertically and barely centred horizontally, can anyone suggest an issue i may be having?

    My code is:

    Code:
    <div id="center">
        	<div id="logo">
        	<a class="home" href="index.html"><img class="noborder" src="images/logocat.png" alt="" /></a> 
        	</div>
        	<div id="top">
          	<p class="toptext">TEXT</p>
        	</div>
        	<div id="contact">
          	<table border="0">
            <tr>
              <td><img src="images/address.png" alt="" /></td>
              <td><p class="contact-text1"> CROOKEDCARTOON@GMAIL.COM </p><p class="contact-text2"> Alex: TEXT</p></td>
              <td><a href="2014.html"><img class="noborder" src="images/seriesindex.jpg" onmouseover="this.src='images/serieshover.jpg'" onmouseout="this.src='images/seriesindex.jpg'" alt="" /></a></td>
            </tr>
         	</table>
        	</div>
    		<div id="about">
         	<p class="content-text-index">TEXT</p>
         	</div>
      </div>
    Here is my CSS:

    Code:
    html, body{ 
    height: 100%; 
    }
    #center {
    	height: 984px;
    	width: 1128px;
        position:absolute;
        top:50%;
    	left:50%;
    	margin-top:-492px;
    	margin-left:-564px;
        padding:0px;
    }
    #top {
    	width: 1128px;
    	height: 28px;
    	margin-top: -17px;
    	margin-bottom: -22px;
    }
    #logo {
    	width: 1128px;
    	margin-top: 10px;
    }
    #contact {
    	width: 1128px;
    	height: 45px;
    	margin-top: -15px;
    }
    #about {
    	width: 930px;
    	margin-top: -13px;
    }
    p.toptext {
    	font-size: 17px;
    	font-family: "Tw Cen MT", "Helvetica";
    	font-weight: bold;
    	color: #d5d3d3;
    	letter-spacing: 0.345ex;
    }
    p.contact-text1 {
    	font-size: 15px;
    	font-family: "Tw Cen MT Bold", "Helvetica";
    	font-weight: bold;
    	color: #000000;
    	letter-spacing: 0.5ex;
    }
    p.contact-text2 {
    	font-size: 14px;
    	font-family: "Tw Cen MT", "Helvetica";
    	color: #000000;
    	letter-spacing: 1ex;
    	margin-top: -15px;
    }
    p.content-text-index {
    	font-size: 14px;
    	font-family: "Tw Cen MT", "Helvetica";
    	color: #d5d3d3;
    }
    And you can see my website here:

    Crooked Cartoon | Screen-Printing & Design Studio in Manchester

    It is beginning to infuriate me that such a simple task is proving to be a mess!

    Any help is appreciated, thanks.

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,285
    Thanks
    23
    Thanked 611 Times in 610 Posts
    I'd first get rid of all neg margins. Then put your #center div into a container div and center the #center inside of that.
    CSS:
    Code:
    html, body{
    height: 100%;
    }
    #can{
    	height: 100%;
    	width: 1128px;
    }
    #center {
    	height: 500px; // makes things easier to see
    	width: 1128px;
    position:absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
        padding:0px;
    outline:1px solid red; // makes things easier to see
    }
    Here's an article for you to read: Absolute Horizontal And Vertical Centering In CSS | Smashing Magazine

    Code:
    <body>
    <div id="can">   
    <div id="center">
       	<div id="logo">
    Strider64 likes this.
    Evolution - The non-random survival of random variants.

    "If you leave hydrogen alone, for long enough, it begins to think about itself."


  •  

    Tags for this Thread

    Posting Permissions

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