小寫之間CSS菜單居中水平/ w img

Question

我一直在網上和stackoverflow上搜索，嘗試了很多代碼，但是沒有任何效果。

我想居中放置菜單，並在其中放置圖像（將是標識）。 我的代碼有什么問題或者我哪里失敗了？ 我已經搜尋並尋求幫助已有3天了...

我希望菜單位於.container類內部，因此頁面內容寬度為978px

預覽/示例： http ： //jsfiddle.net/j08691/LVCkp/1/

的HTML

<div id="home">
            <div class="nav clearfix">
                <div class="container clearfix">               
                    <ul id="menu">
                        <li><a href="#home" class="current">Home</a></li>
                        <li><a href="#services">Serviços</a></li>
                        <li><a href="#team">Equipa</a></li>
                        <a href="#"><img src="img/logo.png" alt="Logo Style Euclides" width="90px" height="40px"></a>
                        <li><a href="#image">Style</a></li>
                        <li><a href="#about">Sobre</a></li>
                        <li><a href="#contact"" class="right"">Contato</a></li>
                    </ul>
                </div>
                </div></div>

的CSS

#home{
    width: 100%;
    background-color: #e9e0fd;
}

a{
    text-decoration: none;
}

    /*TOP MENU*/

        #home .nav img{
            float: left;
            padding: 10px;
        }

        #home .nav{
            /*float: left;*/

            margin: 0;
            padding: 0;
            width: 100%;
            margin-bottom: 10px;
        }

        ul#menu{
            /*width: 978px;*/
            margin: 0;
            padding: 0 ;
            list-style: none;
            margin-bottom: 40px; /* Tamanho da barra de menu */
            text-align: center;
            background-color: black;
        }

        ul#menu li{
            float: left;
            padding-top: 10px;
            margin: 4px;

        }

        ul#menu li a{
            text-transform: uppercase;
            font-weight: bold;
            font-size: 14px;
            letter-spacing: -1px;
            line-height: 30px;
            color: black;
            padding: 2px 24px;
        }

        ul#menu a:hover{
            background-color: #a6e897;
            color: black;
            padding-top: 24px;
            padding-bottom: 21px;
            border-bottom: 3px solid;
            border-color: #6bd951;
        }

        ul#menu a.current{
            color: #32c230;
        }

        ul#menu a.current:hover{
            background-color: #a6e897;
            color: black;
        }

Answer 1

這是為您提供的解決方案： http : //jsfiddle.net/j08691/LVCkp/1/

解決方法是：1.將徽標也放在<li> 。2 .將帶有徽標的類（例如徽標）添加到帶有徽標的代碼中 。3.應用width：auto; 保證金：自動； ul＃menu

的HTML

<div id="home">
            <div class="nav clearfix">
                <div class="container clearfix">               
                    <ul id="menu">
                        <li><a href="#home" class="current">Home</a></li>
                        <li><a href="#services">Serviços</a></li>
                        <li><a href="#team">Equipa</a></li>
                        <li> <a href="#" class="logo"><img src="img/logo.png" alt="Logo Style Euclides"></a></li>
                        <li><a href="#image">Style</a></li>
                        <li><a href="#about">Sobre</a></li>
                        <li><a href="#contact"" class="right"">Contato</a></li>
                    </ul>
                </div>
                </div></div>

的CSS

body{
background:#ccc;
}

#home{
    width: 100%;
    background-color: #e9e0fd;
}

a{
    text-decoration: none;
}

    /*TOP MENU*/

        #home .nav img{
            float: left;
            padding: 10px;
        }

        #home .nav{
            /*float: left;*/

            margin: 0;
            padding: 0;
            width: 100%;
            margin-bottom: 10px;
        }

        ul#menu{
            /*width: 978px;*/
            list-style: none;
            margin-bottom: 40px; /* Tamanho da barra de menu */
            text-align: center;
            background-color: black;
    width:auto;
    margin:auto;
        }

        ul#menu li{
            float: left;
            padding-top: 10px;
            margin: 4px;

        }

        ul#menu li a{
            text-transform: uppercase;
            font-weight: bold;
            font-size: 14px;
            letter-spacing: -1px;
            line-height: 30px;
            color: black;
            padding: 2px 24px;
        }
ul#menu li a.logo{
width:90px;
    height:40px;
    padding:0;
    border:none;
    margin:auto;
    opacity:0.8;
}

        ul#menu a:hover{
            background-color: #a6e897;
            color: black;
            padding-top: 24px;
            padding-bottom: 21px;
            border-bottom: 3px solid;
            border-color: #6bd951;
        }

        ul#menu a.current{
            color: #32c230;
        }

        ul#menu a.current:hover{
            background-color: #a6e897;
            color: black;
        }