Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 7 of 7

Thread: Vertical Center

  1. #1
    Junior Member tksforlife's Avatar
    Join Date
    Oct 2012
    Location
    Hawaii
    Posts
    26
    Member #
    33545
    How can I vertically center my links? Their remain at the top at the moment. Thanks for the help!

    HTML Code:
    <body>
    <div class="navigation">   
    <ul>     
        <li><a href="index.php">Home</a></li>
           
        <li><a href="aboutme.php">About Me</a></li>
     
        <li><a href="weddinggallery.php">Wedding Gallery</a></li>
     
        <li><a href="contactme.php">Contact Me</a></li>
               
        <li><img src="images/logo.png"></li>
    </ul>   
    </div>
    </body>
    Code:
    html {
        width:100%;
        height:100%;
    }
     
    body {
        font-size:1em;
        width:100%;
        height:100%;
    }
     
    .navigation {
        height:15%;
        width:100%;
    }
     
    .navigation ul {
        height:100%;
        width:100%;
        float:left;
        list-style:none;
        padding-left:0;
        margin:0;
    }
     
    .navigation ul li {
        height:100%;
        float:left;
        padding-right:5%;
        white-space:nowrap;
        font-size:1.5em;
    }
     
    .navigation ul li a {
        text-decoration:none;
    }
     
    .navigation ul li:first-child {
        padding-left:10%;
    }
     
    .navigation ul li:last-child {
        padding:0;
        float:right;
    }
     
    .navigation ul li:last-child img {
        height:100%;
    }

  2.  

  3. #2
    Unpaid WDF Intern TheGAME1264's Avatar
    Join Date
    Dec 2002
    Location
    Not from USA
    Posts
    14,483
    Member #
    425
    Liked
    2783 times
    .navigation ul li a {line-height: whatever will get them to center, probably 100%;}
    If I've helped you out in any way, please pay it forward. My wife and I are walking for Autism Speaks. Please donate, and thanks.

    If someone helped you out, be sure to "Like" their post and/or help them in kind. The "Like" link is on the bottom right of each post, beside the "Share" link.

    My stuff (well, some of it): My bowling alley site | Canadian Postal Code Info (beta)

  4. #3
    Junior Member tksforlife's Avatar
    Join Date
    Oct 2012
    Location
    Hawaii
    Posts
    26
    Member #
    33545
    For some reason I have to use percentages over 100% to get this to happen. Whats with that??

  5. #4
    Unpaid WDF Intern TheGAME1264's Avatar
    Join Date
    Dec 2002
    Location
    Not from USA
    Posts
    14,483
    Member #
    425
    Liked
    2783 times
    Not really sure. I've only ever set my menus in terms of ems and pixels, not percentages. One thing that might explain it is if your links are inline. Since you're floating your list elements, you can get away with setting the links to block-level elements.
    If I've helped you out in any way, please pay it forward. My wife and I are walking for Autism Speaks. Please donate, and thanks.

    If someone helped you out, be sure to "Like" their post and/or help them in kind. The "Like" link is on the bottom right of each post, beside the "Share" link.

    My stuff (well, some of it): My bowling alley site | Canadian Postal Code Info (beta)

  6. #5
    Senior Member Ronald Roe's Avatar
    Join Date
    Mar 2011
    Location
    Oklahoma City
    Posts
    3,141
    Member #
    27197
    Liked
    959 times
    You'll have to set the a element to inline block, and set the height to 100%. Then, setting line height should work better.
    Ron Roe
    Web Developer
    "If every app were designed using the same design template, oh wait...Bootstrap."

  7. #6
    Junior Member tksforlife's Avatar
    Join Date
    Oct 2012
    Location
    Hawaii
    Posts
    26
    Member #
    33545
    Damn. Added this and made no difference. Still had to set the line height to 300% percent to get it vertically centered.
    Code:
    .navigation ul li a {
        text-decoration:none;
        display: inline-block;
        height: 100%;
        line-height: 100%;
    }

  8. #7
    Junior Member SeanMS's Avatar
    Join Date
    Apr 2013
    Posts
    7
    Member #
    36088
    Liked
    1 times
    I think I may be misunderstanding what you're asking help for, but after copying your code, I see that your navigation list is displaying horizontally. If you are asking how to get the navigation menu to display vertically, then you need to remove the left floats.


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 03:52 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com