html - 中央 Logo ，两侧各有主菜单

Question

我想将我的 Logo 居中并让我的主菜单显示在 Logo 的每一侧，我不知道该怎么做，我是否必须创建两个单独的菜单来实现该布局？

非常感谢任何建议。

谢谢!

 <header class="remove-padding">
    <div class="container">
        <div id="header" class="row">
            <div class="four columns">
                <div id="logo">
                        <img src=img/inf-logo1.png" alt="test site" />
                    </a>
                    <p class="slogan">Ink addiction</p>
                </div>
            </div>

            <div class="eight columns">
                <div id="headerWidgets">                
                                    </div>


                                <nav id="nav-main" class="nav-main-right" role="navigation">
                    <ul id="menu-main-menu" class="sf-menu"><li id="menu-item-50" class="first-menu-item menu-item menu-item-type-custom menu-item-object-custom menu-item-50"><a href="http://s.se">Home</a></li>
<li id="menu-item-51" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-51"><a href="http://a.se">about</a></li>
<li id="menu-item-52" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-52"><a href="http://s.se">tattoos</a></li>
<li id="menu-item-53" class="last-menu-item menu-item menu-item-type-custom menu-item-object-custom menu-item-53"><a href="http://.se">contact</a></li>
</ul>               
                </nav>    


#logo {padding:20px 0; float:left; overflow: hidden;  }
#logo a {display:block; text-align: left; background:none; border:none; padding:0; margin:0;}

.nav-main-right {float:right; position:absolute; bottom:0; right:4%;}
.nav-main-full .sf-menu{float: left; width:100%; }

.sf-menu, .sf-menu * {list-style:none; margin:0; padding:0}
.sf-menu {line-height:1.0; float:left; font-size:14px; font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif; text-transform: uppercase; letter-spacing:2px;  }
.sf-menu ul {position:absolute; top:-999em; width:14em; text-transform: none; letter-spacing:normal; }
.nav-main-full .sf-menu{float: left; width:100%; }
.sf-menu ul ul {left:1em; margin-top:0;}
.sf-menu ul li {width:100%; }
.sf-menu li:hover {visibility:inherit}
.sf-menu li {float:left; position:relative; padding-bottom:20px; line-height: 1em;}
.nav-main-full .sf-menu li {padding-bottom:10px; padding-top:10px; }
.sf-menu a {display:block; position:relative; text-decoration:none; padding: 0 1em; font-size:1em; border:none; background:none;}
.nav-main-full .sf-menu a {padding: 0 1em;}
.sf-menu .first-menu-item a {padding-left:0;}
.sf-menu .last-menu-item a {padding-right:0;}

.sf-menu a:hover, .sf-menu a:focus {background:none;}
.sf-menu ul a {padding:.5em 1em !important;}
.sf-menu li:hover ul,.sf-menu li.sfHover ul {top:100%; z-index:99}
.nav-main-full .sf-menu li:hover ul ul, .nav-main-full .sf-menu li.sfHover ul ul { top:0;}
.sf-menu a,.sf-menu a:visited {}
.sf-menu li li { border:none; padding:5px 0px !important; }
.sf-menu li li li { }
.sf-menu li:hover,.sf-menu li.sfHover,.sf-menu a:focus,.sf-menu a:hover,.sf-menu a:active { outline:0}

.sf-shadow ul{ }
.sf-shadow ul.sf-shadow-off { background:transparent}
ul.sf-menu li:hover li ul,ul.sf-menu li.sfHover li ul,ul.sf-menu li li:hover li ul,ul.sf-menu li li.sfHover li ul { top:-999em}
ul.sf-menu li li:hover ul,ul.sf-menu li li.sfHover ul,ul.sf-menu li li li:hover ul,ul.sf-menu li li li.sfHover ul { left:14em; margin-left:2px; top:0}
.sf-menu a.sf-with-ul {padding-right:   2.2em; min-width: 1px;}
.sf-sub-indicator { position: absolute; display:block;right:1em;width:14px;height:14px;text-indent:-999em;overflow:hidden;background:url('../images/submenu.png') no-repeat;}
a > .sf-sub-indicator { top:0;}
.sf-menu ul .sf-sub-indicator,.sf-menu ul a:focus > .sf-sub-indicator,.sf-menu ul a:hover > .sf-sub-indicator,.sf-menu ul a:active > .sf-sub-indicator,.sf-menu ul li:hover > a > .sf-sub-indicator,.sf-menu ul li.sfHover > a > .sf-sub-indicator { top:0.5em;}
.sf-shadow ul {-webkit-box-shadow: 0px 0px 3px 3px rgba(0, 0, 0, 0.2); -moz-box-shadow: 0px 0px 3px 3px rgba(0, 0, 0, 0.2); box-shadow: 0px 0px 3px 3px rgba(0, 0, 0, 0.2); }
.sf-shadow ul.sf-shadow-off { box-shadow:none; }

Answer 1

使用ul列表

HTML

<ul>
    <li>Menu 1</li>
    <li>Menu 2</li>
    <li>Menu 3</li>
    <li><img src="https://developer.cdn.mozilla.net/media/img/mdn-logo-sm.png" /></li>
    <li>Menu 4</li>
    <li>Menu 5</li>
    <li>Menu 6</li>
</ul>

CSS

ul{margin:0; padding:0}
ul li{
    display:table-cell; 
    vertical-align:middle; 
    padding:0 6px;
    border-right:#8fa011 1px solid
}

DEMO