Adjusting spacing in Nav Bar with Centered Logo

StackOverflow https://stackoverflow.com/questions/22111241

Pregunta

Here I have a nav bar set up with a centered logo. The only problem is that I can't get it to look quite right with spacing. The logo is set to 'position: absolute' 'left: 50%' and 'margin-left: -125px' so that is always in the center. Now I just need to get the text balanced around it in a more symmetrical way, but I can't seem to figure out how to do so.

Here's the HTML

<link rel="stylesheet" href="stylesheet.css"/>
</head>
<body>
    <div class="header">
        <div class="nav">
            <ul>
                <li class="navright"><a href="#">HOME</a></li>
                <li class="navright"><a href="#">MENU</a></li>
                <li id="logo"><a href="#"><img src="Images/pantry logo.png" width="536" height="348"/></a></li>
                <li class="navleft"><a href="#">CONTACT</a></li>
                <li class="navleft"><a href="#">ABOUT</a></li>
            </ul>        
       </div>
  </div><!--end header-->

And the CSS.

.header {
    width: 960px;
    height: 200px;
    margin: 0 auto;
    text-align: center;
    position: relative;
}

div ul li {
    display: inline-block;
    padding: 105px 70px 40px 0;
    font-family: "Montserrat", "Helvetica", sans-serif;
    font-size: 18px;
    color: #4f4d4b;
    text-decoration: none;
    list-style: none;
}

div ul li a {
    list-style: none;
    text-decoration: none;
    color: #4f4d4b;
}

.nav ul li a:visited {
    text-decoration: none;
    color: #4f4d4b;
}


#logo a img {
    width: 250px;
    height: auto;
    position: absolute;
    left: 50%;
    margin-left: -125px;
    display: inline-block;
}

#logo {
    height: 60px;
    padding-top: 40px;
    width: 250px;
}

You can go to the site here.

¿Fue útil?

Solución

Here's what I would do, and this is just the way I would normally go about things.

I would take the padding of the li, then add the 105px padding to the top of the header (or nav). Next, add some arbitrary margin-right to each li element (say 48px), while of course setting li:last-child to margin: 0; Next take the padding-top and the height off the li#logo and change it to this:

#logo { width: 250px; position: relative; }

Finally, just use a transform to center the logo if you are going to use absolute positioning. This essentially does the same thing as the margin-left, but it is a little more flexible. So the image css should look like this:

#logo a img {
  width: 250px;
  height: auto;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
}

I used this code and it worked perfectly for me. I can make you a fiddle or something also if you are having trouble still.

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top