Magento : 맞춤 메뉴 확장 - CSS를 가운데 메뉴

Question

나는 Custom Menu extension for Magento을 사용하지만 사용자 정의 메뉴를 변경하여 메뉴를 중앙에 배치하는 방법을 찾을 수 없습니다. 이 메뉴의 코드 조각입니다 :

<div class="nav-container"> 
    <div id="custommenu"> 
    <div id="menu3" class="menu" onmouseout="wpHideMenuPopup(this, event, 'popup3', 'menu3')" onmouseover="wpShowMenuPopup(this, 'popup3');"> 
    <div id="popup3" class="wp-custom-menu-popup" onmouseover="wpPopupOver(this, event, 'popup3', 'menu3')" onmouseout="wpHideMenuPopup(this, event, 'popup3', 'menu3')" style="z-index: 9999;"> 
    <div id="menu4" class="menu" onmouseout="wpHideMenuPopup(this, event, 'popup4', 'menu4')" onmouseover="wpShowMenuPopup(this, 'popup4');"> 
    <div id="popup4" class="wp-custom-menu-popup" onmouseover="wpPopupOver(this, event, 'popup4', 'menu4')" onmouseout="wpHideMenuPopup(this, event, 'popup4', 'menu4')" style="display: none; top: 25px; left: 77px; z-index: 10000;"> 
... rest of code... 

을 그리고 이것은 내가 CSS에서 뭘하려 - #custommenu + 표시 텍스트 정렬 : 인라인 블록을 div.menu에 대한 (그리고 다른 너무 옵션)하지만 수

#custommenu { 
    position:relative; 
    font-size: 14px; 
    margin: 0 auto; 
    padding: 0 16px; 
    width: 918px; 
    z-index: 999; 
    text-align: center;  
} 
div.menu { 
    display:inline-block; 
    float: left; 
} 

메뉴를 중앙에 배치하는 방법에 대한 힌트를 제공해 줄 수 있습니까? 여기서 내가 뭘 잘못하고 있니?

Answer 1

임 확실하지이 당신의 CSS 문제를 해결할 것입니다하지만 당신은 폐쇄되지 않습니다 <div>의 경우 : 당신이 CSS 파일에 액세스 할 수없는 경우

<div class="nav-container"> 
<div id="custommenu"> 
    <div id="menu3" class="menu" onmouseout="wpHideMenuPopup(this, event, 'popup3', 'menu3')" onmouseover="wpShowMenuPopup(this, 'popup3');"></div> 
    <div id="popup3" class="wp-custom-menu-popup" onmouseover="wpPopupOver(this, event, 'popup3', 'menu3')" onmouseout="wpHideMenuPopup(this, event, 'popup3', 'menu3')" style="z-index: 9999;"></div> 
    <div id="menu4" class="menu" onmouseout="wpHideMenuPopup(this, event, 'popup4', 'menu4')" onmouseover="wpShowMenuPopup(this, 'popup4');"></div> 
    <div id="popup4" class="wp-custom-menu-popup" onmouseover="wpPopupOver(this, event, 'popup4', 'menu4')" onmouseout="wpHideMenuPopup(this, event, 'popup4', 'menu4')" style="display: none; top: 25px; left: 77px; z-index: 10000;"></div> 
</div> 
</div> 

:

수정 HTML을 편집하려면 <div class="nav-container">을 다른 <div>에 넣으십시오.

예 :

<div class="nav-wrapper"> 
    <div class="nav-container"> 
     <div id="custommenu"> 
      ... 
     </div> 
    </div> 
</div> 

그리고 다음과 같이 CSS를 참조 :이 언급해야

div.nav-wrapper div.nav-container div#custommenu { 
    position:relative; 
    font-size: 14px; 
    margin: 0 auto; 
    padding: 0 16px; 
    width: 918px; 
    z-index: 999; 
    text-align: center;  
} 
div.nav-wrapper div.nav-container div#custommenu div.menu { 
    display:inline-block; 
    float: left; 
}