Подтвердить что ты не робот

Вертикально выравнивать содержимое столбца Bootstrap 3

Вернувшись к веб-разработке после четырехлетнего перерыва, я испытываю трудности с вертикальным выравниванием содержимого столбца bootstrap 3 со следующим столбцом. Я пробовал искать этот сайт, а также общий поиск в целом и просто не придумал правильное решение... или мои поисковые термины плохи.

В HTML/CSS ниже я хотел бы по вертикали центрировать текст "Название страницы" в левом столбце. Я хотел бы, чтобы HTML и CSS были максимально сжатыми при использовании CSS Bootstrap 3, поэтому я просто думаю, что я просто пропустил что-то простое.

HTML

<div class="row page-header-box">
<div class="col-md-2 col-sm-2 col-xs-3 page-header-title">Page Title</div>
<div class="col-md-10 col-sm-10 col-xs-9 page-header-seperator">
    <div class="page-header-description"><small>Standard Text Description</small></div>
    <div class="page-header-alt"><small>Additional Text Description</small></div>
</div>

CSS   

    .page-header-box {
        background-color:#3D3D3D;
        border-bottom:5px solid #b3b5b8;
        margin-bottom:10px;
    }
    .page-header-title { color:#f79239;text-align:right;vertical-align:middle;margin:10px 0; }
    .page-header-seperator { border-left:5px solid #4e2f91;margin:10px 0; }
    .page-header-description { color:#febe10; }
    .page-header-alt { margin-top:5px;color:#0093b2; }

Вот jsFiddle... http://jsfiddle.net/E6LcY/8/

Это один из немногих раз, когда я когда-либо писал, поэтому указывать мне в правильном направлении было бы здорово.

4b9b3361

ОТВЕТЫ

Ответ 1

Я решил удалить этот вопрос, но подумал, что ответ может быть полезен кому-то другому (например, мне), который ищет возможное решение.

Я хотел остаться в рамках Bootstrap 3... и в итоге добавил JavaScript, чтобы сделать "титульный" центр. Я понял, что Bootstrap 3 в основном требует jQuery для некоторой функциональности, поэтому все в порядке.

Теперь я уверен, что может быть лучший способ, но мне не понравились другие решения. Спасибо всем, кто пытался поставить меня на правильные пути.

HTML

<div class="row page-header-box">
<div class="col-md-2 col-sm-2 col-xs-3 page-header-title" id="header-title">Page Title</div>
<div class="col-md-10 col-sm-10 col-xs-9 page-header-seperator" id="header-seperator">
    <div class="page-header-description"><small>Standard Text Description Standard Text Description Standard Text Description Standard Text Description Standard Text Description Standard Text Description</small></div>
    <div class="page-header-alt"><small>Additional Text Description</small></div>
</div>
</div>

CSS

.page-header-box {
background-color:#3D3D3D;
border-bottom:5px solid #b3b5b8;
margin-bottom:10px;
}
.page-header-title { color:#f79239;text-align:right;margin-bottom:10px; vertical-align: middle; }
.page-header-seperator { border-left:5px solid #4e2f91;margin:10px 0; }
.page-header-description { color:#febe10; }
.page-header-alt { margin-top:5px;color:#0093b2; }

JS (с использованием jQuery)

var sep_height = '';
$(window).on("load resize", function(e) {
var seperatorHeight = $('#header-seperator').height();
if (seperatorHeight != sep_height) {
    sep_height = seperatorHeight;
    var titleHeight = $('#header-title').height();
    var difference = ((seperatorHeight - titleHeight) / 2) + 5;
    $('#header-title').css('margin-top', difference + 'px');
}
});

Примечание: "sep_height" просто так, что я не делаю ненужных вычислений и только изменяю высоту заголовка, когда мне нужно. Я также добавляю дополнительный 5px к верхнему краю для компенсации полей в тексте описания.

Вот последняя скрипка (с исправлением для события onLoad): http://jsfiddle.net/E6LcY/15/

Спасибо всем тем, кто помог.

Ответ 3

Вот как я это делаю, вы можете попробовать следующее:

.Parentdiv{
position:relative;
width:100%;
height:100%;
}

.Parentdiv .childdiv{
position: absolute;
top:0;
bottom:0;
margin:auto;
}

Ответ 4

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

В этом случае я закончил архивирование необходимых мне функций, отказавшись от начальной загрузки и используя комбинацию flexboxes с этими свойствами, применяемыми к родительскому:

.parent {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

для детей:

.parent > div {
  display: inline-block;
  vertical-align: middle;
}

и этот мультимедийный запрос:

@media all and (max-width: 500px) {
  .parent {
    /* for small screens, we use column direction rather than row */
    flex-direction: column !important;
  }
}

Входящий html выглядит следующим образом:

<div class="parent">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>

Я использовал это, например, для чувствительного нижнего колонтитула. Играя с комбинацией некоторой фиксированной ширины и поля (одинаковой для каждого), они хорошо выравниваются поверх других в разных количествах в строке в зависимости от ширины экрана, пока он не станет достаточно узким, чтобы просто показать их в одной строке,

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