Вертикально выровнять содержимое в бутстрапе div

Итак, я могу смутить то, что, по моему мнению, должно быть простым. Возьмите код ниже, просто начал использовать Bootstrap, поэтому, вероятно, не идеально, но достаточно для примера.Вертикально выровнять содержимое в бутстрапе div

<div class="row"> 
    <div class="col-md-12"> 
     <div class="col-md-4"> 
     <h1>Logo Text</h1> 
     </div> 
     <div class="col-md-8"> 
     <ul> Navbar.... </ul> 
     </div> 
    </div> 
</div>

Так себе, что код выше мой заголовок, как я могу гарантировать, что обе стороны для логотипа и навигационной панели сосредоточены по горизонтали и по вертикали в их соответствующих Див-х годов?

Я подозреваю, что мне нужно использовать таблицу, ячейку таблицы, вертикальную выровненность: центр, но это действительно эффективно или правильно?

Необходимо сохранять отзывчивость.

Thanks

источник

2015-09-14 Holo

Если все, что вы хотите, чтобы центрировать по вертикали, все, что вам нужно, это настроить padding: 10px 0; и поиграть с этим 10, пока вы не выстроитесь в линию. Это поможет, если вы каскадируете класс clearfix в col-md-8. Теперь это короткий сладкий и простой ответ (SSS). Но вы упомянули, что теперь используете Bootstrap. Если бы я был вами, я бы использовал навигационную панель Bootstrap и соответствующим образом изменил. Вся идея использования такой надежной основы заключается в том, чтобы убедиться, что вы воспользуетесь всеми звонками и свистами, которые приходят с ней, с меньшим временем кодирования.

Я построил образец here

источник

2015-09-14 20:04:25 LOTUSMS

Это прекрасно, и я настроил по умолчанию навигационную панель практически так же, как вы это сделали, я просто хотел увидеть, как легко было бы немного сломать ее и быть немного более обычным. – Holo

Абсолютно! Пользовательский! Это то, что вы должны делать, но не слишком много соприкасайтесь с классами, для которых загрузочная установка настроена для вас. Они облегчат вам жизнь. – LOTUSMS

Да, я настроил custom.css, чтобы я мог переопределить, не уничтожая бутстрап. Я получаю то, что вы имеете в виду сейчас, с дисплеем: встроенный блок ниже. :) – Holo

На самом деле, я подумал об этом на минутку.

Если установить один из внутренних дивы этого

.inner { 
    height: 100px; 
    display: table;

}

Затем на фактическое содержание, которое я хочу позиционировать

.pos { 
    display: table-cell; 
    text-align: center; 
    vertical-align: middle;

}

Я угадайте, что важно здесь, вам нужно установить высоту либо на%, либо что-то более конкретное, чтобы от выравнивания есть над чем работать. И, конечно же, установить весь div как таблицу с содержимым div table-cell.

Это правильный путь?

источник

2015-09-14 20:03:11 Holo

Если вы используете Bootstrap, чтобы, наконец, оторваться от старой школы и противных макетов таблиц, это будет что противоречит возврату в нее с помощью display: table. Эти свойства CSS используются для особых целей. AS вы узнаете больше о Bootstrap, вы увидите показ: inline-block - ваш друг :) – LOTUSMS

да, полностью согласен, но таблица исправляет все правильно :) Это моя проблема, хотя, когда я ищу о решениях, я все время вижу люди, использующие столы, я думаю, что я не единственный, кто перестает сосредотачиваться на старых путях! – Holo

Вы снова попадете в плохие привычки. Все дело в том, чтобы уйти от таблиц отображения, чтобы не подвергать риску отзывчивость. Таблицы - враг. Помни это. Используйте таблицы только для табличных форм. Вот и все. Все остальное - DIVs и отзывчивый код. Избегайте таблиц, таких как чума. – LOTUSMS

.col-md-8, .col-md-4 { 
    display: flex; 
    align-items: center; // Vertical 
    justify-content: center; // Horizontal 
}

источник

2015-09-14 20:07:23 Roemerdt

Хотя этот код может решить вопрос афер, вы всегда должны добавить объяснение относительно того, как это решает проблему. Добро пожаловать в Stack Overflow, рекомендуемое чтение [ask] –

Попробуйте этот класс:

.vertical_align_middle { 
    position: relative; 
    top: 50%; 
    -moz-transform: translateY(-50%); 
    -ms-transform: translateY(-50%); 
    -o-transform: translateY(-50%); 
    /* etc */ 
    -webkit-transform: translateY(-50%); 
    transform: translateY(-50%); 
}

источник

2015-09-14 20:12:02

.vertical_align{ 
    position: relative; 
    top: 50%; 
    transform: translateY(-50%); 
}

источник

2015-09-17 17:03:53

Вертикально выровнять содержимое в бутстрапе div

ответ

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