Как разместить центр элемента навигации под родительским div?

Я добавил второй элемент nav к представлению под баннером сайта. Но когда экран расширен с разрешением по умолчанию, меню перекосировано слева от значка сайта.Как разместить центр элемента навигации под родительским div?

Моя цель - позиционировать меню непосредственно в соответствии с баннером сайта. Я создал новый JSFiddle link настройки страницы, чтобы объяснить текущую проблему позиционирования.

Я инспектировать с Chrome Дев инструментов и выглядеть как обивка, вызывая позиционирование выделены оранжевым цветом:

Меню в настоящее время появляется в центре, как это:

В то время как я хотите разместить его непосредственно в разделе «Self Service» следующим образом:

Я попытался сокращения правого поля на пользовательский CSS СЧА элемента, чтобы протолкнуть в дальнейшем право в соответствии с лозунгом:

#chartNav { 
    background-color: #614767; 
    display: inline-block; 
    padding: 10px 20px 10px 20px; 
    margin: 0 5% 0 10%; 
    padding-bottom: 20px; 
    text-align: center; 


}

Но меню нав еще стаскивать центр баннера ,

Вопрос:

Как я могу позиционировать нав центр элемента под родительского DIV?

Это суть разметки, содержащего название баннера сайт DIV и это содержащее навигационное меню:

<div class="container-fluid"> 
     <div class="col-md-2 col-xs-2"></div> 
     <div class="col-md-10 col-xs-6"> 
      <label class="main-title">Self Service</label> 
     </div> 

     <div class="row"> 


      <div class="col"> 

       <div class="col"> 

        <nav> 

         <ul id="chartNav"> 
          <li><a>Asset Selection:</a></li> 
          <li> 
           <a>All <span class="arrow">&#9660</span></a> 
           <ul class="sub-menu"> 
            <li><a href="#" class="small" data-value="option1" tabindex="-1"><input type="checkbox" />&nbsp;Option 1</a></li> 
            <li><a href="#" class="small" data-value="option2" tabindex="-1"><input type="checkbox" />&nbsp;Option 2</a></li> 

           </ul> 
          </li> 
          <li><a>Date Range:</a></li> 
          <li> 
           <input class="input-sm" type="text" name="daterange" value="01/01/2015 - 01/31/2015" /> 
          </li> 
          <li><a>Profile:</a></li> 
          <li> 
           <a>Default <span class="arrow">&#9660</span></a> 
           <ul class="sub-menu"> 
            <li><a href="#" class="small" data-value="option1" tabindex="-1"><input type="checkbox" />&nbsp;Option 1</a></li> 
            <li><a href="#" class="small" data-value="option2" tabindex="-1"><input type="checkbox" />&nbsp;Option 2</a></li> 

           </ul> 
          </li> 
         </ul> 

        </nav> 

       </div> 
      </div>    

     </div> 

</div>

источник

2016-07-05 Brian J

исправил ссылку JSFiddle .. –

центр означает, что? можете ли вы подробнее описать PLZ. –

@NikVarma добавил несколько изображений выше, чтобы объяснить. Теперь меню выключено слева от значка сайта, но оно должно быть непосредственно под баннером «Самообслуживание». –

Добавление это, кажется, чтобы решить эту проблему, первые две строк выравнивания контейнера СЧА к центру, в то время как третий удаляет ненужное левое поле, о котором вы упомянули.

.col-md-10{ 
    width: 100%; 
    text-align: center; 
    margin-left: 0px; 
}

проверить его https://jsfiddle.net/m7h541vb/3

источник

2016-07-05 14:04:23

Как разместить центр элемента навигации под родительским div?

ответ

Смежные вопросы