Вертикальное выравнивание не работает в Bootstrap

Я пытаюсь вертикально центрировать ссылки меню моего заголовка, но не работает. Я использую Bootstrap.Вертикальное выравнивание не работает в Bootstrap

HTML

<div class="container-fluid"> 
    <div class="row"> 
     <div class="col-xs-12 header"> 
      <div class="row"> 
       <div class="col-xs-1"></div> 
       <div class="col-xs-2" style="font-size: 40px;"> 
        <p>Capelli</p> 
       </div> 
       <div class="col-xs-3"></div> 
       <div class="col-xs-6"> 
        <ul class="list-group list-inline"> 
         <li>Vestidos</li> 
         <li>Meus Pedidos</li> 
         <li></li> 
         <li></li> 
         <li>Login</li> 
         <li>Cadastro</li> 
         <li></li> 
         <li></li> 
         <li>Carrinho</li> 
        </ul> 
       </div> 
       <div class="col-xs-1"></div> 
      </div> 
     </div> 
    </div> 
</div>

CSS

body { 
    background-color: #CFCFCF; 
} 

.header { 
    min-height: 3.7em; 
    color: #FFFFFF; 
    background-color: #002A43; 
    font-family: Arial, sans-serif; 
    font-size: 20px; 
} 

.vertical { 
    float: none; 
    display: inline-block; 
    vertical-align: middle; 
}

При выполнении кода, ничего не происходит.

Я пробовал много вещей, например, использовать класс непосредственно в строке или в столбце, но ничего не работает. Я также применяю различные методы для выравнивания по вертикали, но не работал.

P.S .: Извините за мой плохой английский.

источник

2015-07-26 Krueger

Обратите внимание, что вы не применяете 'vertical' ни к чему, добавьте его в' col-xs- * '. Кроме того, в вашей «строке» ваша сетка суммируется до 13 колод - проверьте, если это по дизайну. –

Я попытался поместить класс в строку, но это не сработало – Krueger

Я не сказал, чтобы поместить его в 'row', я сказал, применил его к' div 'с классом' col-xs- * ' –

Вы хотите создать меню навигационной панели?

<nav class="navbar navbar-default"> 
    <div class="container-fluid"> 
    <div class="navbar-header"> 
     <a class="navbar-brand" href="#">Capelli</a> 
    </div> 
    <div> 
     <ul class="nav navbar-nav push-right"> 
     <li class="active"><a href="#">Vestidos</a></li> 
     <li><a href="#"> etc</a></li> 
     <li><a href="#">etc</a></li> 
     <li><a href="#">etc</a></li> 
     </ul> 
    </div> 
    </div> 
</nav>

в css you shoud определяет размер шрифта X пикселей, потому что вы используете относительный размер шрифта.

его 3.7em 10px или 20px. в зависимости от браузера значение может измениться.

html{ font-size: 16px;} 
.header{font-size: 1.25em; // 20/16 = 1.25 and you have sure the font size is relative to 16 because you have define html font size to 16px;.

источник

2015-07-26 01:28:37 user3369804

Но проблема заключается в том, что класс navbar имеет небольшую высоту, и если я увеличиваю его элементы, элементы больше не будут выровнены по вертикали – Krueger

Вертикальное выравнивание не работает в Bootstrap

ответ

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