Page 1 of 3 123 LastLast
Results 1 to 10 of 26

Thread: Centre Aligning a Div

  1. #1
    Join Date
    Mar 2011
    Posts
    38
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Default Centre Aligning a Div

    Im currently making a website for the design studio I work for and its not far from completion. The one problem I am having is centreing the links at the very top. All these links are enclosed within one main DIV so all I want to do is align this div so it sits right in the middle of the users screen. Now it seem to do this horizontally but it wont do it vertically.

    Could anyone please look at the code and help point out where I am going wrong.

    The sit is currently hosted here: www.stormdfx.com/stormdfx


    The DIV I want to centre is called storm-home



    Any help would be much appriciated.

    Thanks,

    Rich

  2. #2
    Join Date
    Mar 2011
    Posts
    38
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Default

    anyone able to help me?

  3. #3
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    2,027
    Thanks
    16
    Thanked 315 Times in 313 Posts
    Blog Entries
    13

    Default

    I can't check from iPhone but maybe its because you've not set the left and right margins to "auto"?

    See this for ref: http://www.w3schools.com/css/css_align.asp
    Focus on Function Web Design | Latest News RSS | Facebook | Twitter |
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps |
    The only limit to creativity is imagination: JemCon.org

  4. #4
    Join Date
    Mar 2011
    Posts
    38
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Default

    Ive added margin-left and margin-right auto and it hasn't made it float in the centre. I've got top set to 50%.

    Not sure what the problem is.

  5. #5
    Join Date
    Mar 2011
    Posts
    38
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Default

    Centre aligning horizontally isnt the problem really its getting it to float in the centre vertically.

  6. #6
    Join Date
    May 2012
    Location
    Hitchhiking the Galaxy
    Posts
    1,013
    Thanks
    46
    Thanked 139 Times in 139 Posts
    Blog Entries
    1

    Default

    "Most good programmers do programming not because they expect to get paid or get adulation by the public, but because it is fun to program." - Linus Torvalds
    Anime Views Forums
    Bernie

  7. #7
    Join Date
    Mar 2011
    Posts
    38
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Default

    Where do i place that in the code, im not sure?

  8. #8
    Join Date
    Mar 2011
    Posts
    38
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Default

    I've tried it in a few locations and it doesn't seem to be working :S

  9. #9
    Join Date
    Mar 2011
    Posts
    38
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Default

    this is the code for the part i want to centre:

    HTML Code:
    <div id="content">
    	<article id="storm-home">
    		<div><a href="#storm-dfx" class="home-create"> </a></div>
    		<div id="text-box1"><img src="img/text-block1.png" alt="text" width="940" height="25" /></div>
    		<div><a href="#service" class="home-create1"> </a></div>
    		<div id="text-box2"><img src="img/text-block2.png" alt="text" width="940" height="19" /></div>
    		<div><a href="#finger-pulse" class="home-create2"> </a></div>
    		<div id="text-box33"><img src="img/text-block3.png" alt="text" width="940" height="30" /></div>
    		<div><a href="#award-winning" class="home-create3"> </a></div>
    		<div id="text-box4"><img src="img/text-block4.png" alt="text" width="940" height="16" /></div>
    		<div><a href="#repack-service" class="home-create4"> </a></div>
    		<div id="text-box5"><img src="img/text-block5.png" alt="text" width="940" height="28" /></div>
    		<div><a href="#drop-line" class="home-create5"> </a></div>
    		<div>
    			<div id="text-box6"><img src="img/text-block6.png" alt="text" width="146" height="47" /></div>
    			<div><a href="#your-brand" class="home-create6"> </a></div>
    		</div>


    This is the CSS for the storm-home id:

    Code:
    #content article { width: 940px; height: 550px;}		
                    #storm-home,
    		#storm-dfx,
    		#service,
    		#finger-pulse,
    		#award-winning,
    		#repack-service,
    		#drop-line,
    		#your-brand{padding-top: 10px;}
    		#storm-home {position: absolute; top: 50%; margin-left:auto; margin-right:auto;  vertical-align:text-top;}
    		#storm-dfx {position: absolute; top: 1090px;}
    		#service {position: absolute; top: 2180px;}
    		#content h1 {margin: 0 0 25px 0; font-size: 60px; font-family: arial; font-weight: normal; line-height: 65px;}
    		#finger-pulse {position: absolute; top: 3270px;}
    		#award-winning {position: absolute; top: 4360px;}
    		#repack-service {position: absolute; top: 5450px;}
    		#drop-line {position: absolute; top: 6540px;}
    		#your-brand {position: absolute; top: 7630px;}
    Last edited by keyboard; 11-01-2012 at 11:49 AM. Reason: Format: Code Tags [code][/code], Html Tags [html][/html]

  10. #10
    Join Date
    Mar 2011
    Posts
    38
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Default

    OK Ive tried adding this css to a new div and then wrapping that div around the content and it doesnt work. Now if I open a statr a new html document with nothing in it it seem works. So Im guessing some cod I already have isnt allowing it to align vertically in the centre though I dont know which bit of code :-(

    Code:
    #div-new{
       position: absolute;
       background: #000;
       top: 50%;
       left: 0;
       width: 100%;
    }
    Last edited by keyboard; 11-01-2012 at 12:01 PM. Reason: Format: Code Tags [code][/code]

Similar Threads

  1. Resolved Need to get my slideshow to centre
    By Jinx13 in forum Dynamic Drive scripts help
    Replies: 1
    Last Post: 04-19-2010, 03:35 PM
  2. get window to pop up in centre??
    By liamallan in forum JavaScript
    Replies: 1
    Last Post: 03-25-2010, 03:12 AM
  3. Centre my divs??
    By llallypops in forum HTML
    Replies: 2
    Last Post: 03-11-2010, 03:13 PM
  4. How to centre align a Div
    By neilkw in forum HTML
    Replies: 5
    Last Post: 03-30-2006, 08:49 AM

Bookmarks

Posting Permissions

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