Блог

Главная - Вопросы по программированию - Выравнивание значка по вертикали в Bootstrap 2.3.2 панель навигации-форма

Выравнивание значка по вертикали в Bootstrap 2.3.2 панель навигации-форма

#css #twitter-bootstrap

#css #twitter-bootstrap

Вопрос:

У меня есть проект Bootstrap 2.3.2, где есть панель навигации. Эта панель содержит значки (Fontawesome), которые являются просто значками (не кнопкой или ссылкой). Однако они неправильно выровнены по вертикали. Они прилипают к вершине.

Вот упрощенный пример:

 <link href="https://maxcdn.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet"/>

<div class="navbar">
  <div class="navbar-inner">
    <div class="navbar-form pull-left">
      <i class="icon-time"></i>
      <button class="btn">
        Some button
      </button>
      <select>
        <option>Option 1</option>
        <option>Option 2</option>
      </select>
    </div>
  </div>
</div>

Я хочу переместить значок часов в приведенном выше примере вниз, чтобы он совпадал с текстом в той же строке. Желательно просто использовать классы начальной загрузки Twitter, но я ничего не могу найти в документах.

Ответ №1:

Может быть, добавить выравнивание по вертикали?

 <link href="https://maxcdn.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet"/>
<style>
    .icon-time { 
        vertical-align: -6px;
}

</style>
<div class="navbar">
  <div class="navbar-inner">
    <div class="navbar-form pull-left">
      <i class="icon-time"></i>
      <button class="btn">
        Some button
      </button>
      <select>
        <option>Option 1</option>
        <option>Option 2</option>
      </select>
    </div>
  </div>
</div>

Комментарии:

1. Конечно, это работает, но это немного нерегламентировано. Мне было интересно, есть ли способ начальной загрузки? Если нет, я мог бы обобщить это в пользовательское правило css, конечно. Кроме того, не знал, что вы можете использовать единицы измерения в vertical-align , приятно.

2. Не уверен, что в bootstrap есть что-то конкретное для выравнивания по вертикали. Вместо этого вы можете сделать то же самое с margin-top .