메인 메뉴가 각면에 나타나는 가운데 로고

Question

로고를 중앙에 배치하고 로고의 각면에 내 메인 메뉴를 표시하고 싶습니다. 어떻게해야하는지에 대한 단서가 없습니다. 두 개의 개별 메뉴를 만들어야합니까? 그 레이아웃을 달성하기 위해?

모든 조언을 주시면 감사하겠습니다.

감사합니다.

<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 list

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