Home/ Questions/Q 7187355
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-28T18:49:37+00:00

I am trying to put a logo between two menu lists, but it isnt

  • 0

I am trying to put a logo between two menu lists, but it isnt working. I made a PSD before hand and this is what it is supposed to look like:

enter image description here

However, I just cant accomplish this in html and css for some reason. Here is what it looks like right now:

enter image description here

How am I supposed to do this? It just wont work for some reason.

My HTML:

<body>
    <div class="nav">
        <div class="container">
            <div class="menu-left">
                <ul>
                    <li><a id="hello" href="#">Home</a></li>
                    <li><a id="about" href="#">About</a></li>
                </ul>
            </div>
            <div class="logo"></div>
            <div class="menu-right">
                <ul>
                    <li><a id="portfolio" href="#">Portfolio</a></li>
                    <li><a id="contact" href="#">Contact</a></li>
                </ul>
            </div>
        </div>
    </div>
</body>

My CSS:

    div {
    display: block;
}

.nav {
    height: 64px;
    background: url(navigation_bg.png);
    width: 100%;
    margin:0 auto;
}

.container {
    width: 960px;
    position: relative;
    margin:0 auto;
}

.menu-left, .menu-right {
    width: 300px;
    height: 64px;
    position: absolute;
    top: 0;
}

.menu-left {
    left: 200px;
}

.menu-right {
    right: 200px;
}

.nav ul {
    list-style:none;
    margin: 0;
    padding: 0;
    height: 64px;
    line-height: 64px;
}

.nav ul li {
    float: left;
    font-family: 'FuturaStdBoldCondensed';
    font-size: 20px;
    text-shadow: 1px 1px 1px black;
    text-transform: uppercase;
    margin:0 20px;
}

.menu-right ul li {
    float: right;
}

.logo {
    margin: 0 auto;
    width: 140px;
    height: 128px;
    background: url(logo.png) center center rgba(0,0,0, 0.4);
    border-radius: 0 0 20px 20px;
}

How do I get this perfectly centered?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    1. I wouldn’t actually separate menu into two pieces. Make it in one piece, and then set one of the middle LI to class lets say hspace and apply padding-left (or right) to that class. Then absolutely postion your logo.

    2. To perfectly center the text in LI, just apply text-align: center; to it.

    • 0