Вертикальное выравнивание в бутстрапных пролетах

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

Например, если у меня есть строка и охватывает это как

<div class="row-fluid">
   <div class="span3" style="background-color:lightblue">Description</div>
   <div class="span9" style="background-color:pink">
   Lorem ipsum Lorem ipsum  Lorem ipsum  Lorem ipsum  Lorem ipsum  Lorem ipsum  Lorem ipsum  ....
   </div>
</div>

Похоже на это

enter image description here

Итак, есть способ показать "Описание" по вертикали в центре следующей высоты пролета?

ОТВЕТЫ

Ответ 1

попробуйте display: table; для родителя и display: table-cell; для дочернего

JSFiddle

Ответ 2

Если вы пытаетесь вертикально центрировать элемент для определенных размеров экрана, вы всегда можете использовать медиа-запросы, такие как:

/*tablet*/
@media (min-width: 768px) and (max-width: 979px) {
  #logo{
    margin-top:70px;
  }
}
/*desktop*/
@media (max-width: 979px) {
  #logo{
    margin-top:20px;
  }
}
/*large desktop*/
@media (min-width: 1200px) {
  #logo{
    margin-top:0;
  }
}

Ответ 3

Вы можете попробовать некоторые абсолютные центрирующие трюки с CSS. Например, если вы хотите: 1) объявить высоту div для центровки и 2) Сделайте свой .row-fluid position: relative;, а затем этот образец может работать для вас.

Результат в следующем DOM:

<div class="row-fluid relative">
    <div class="span3">
        <div class="vercenter" style="background-color:lightblue">Description</div>
    </div>
    <div class="span9" style="background-color:pink">Lorem Ipsum...</div>
</div>

И CSS:

.relative {
    position: relative;
}
.vercenter {
    height: 1.5em;
    margin: auto;
    left: 0;
    top: 0;
    bottom: 0;
    position: absolute;
}

Ответ 4

Я много работал над этим, и здесь показано простое решение с помощью jquery!

<script>
$(document).ready(function(){
    var relheight=$('.span9').height() / 2;
    $('.span3').css('margin-top', relheight) ;

});
</script>

Он работает, и я тестировал его также. Если вам нравится мой ответ, проголосуйте за меня

Ответ 5

В Bootstrap нет такой ситуации. Он зависит от имплантации. Однако вы можете написать правило css, в котором говорится, что если следующий div превышает высоту предыдущего div, выровняйте предыдущий div на центральной высоте следующего div и примените этот класс к divs, где бы вы этого не хотели.

Ответ 6

Проверьте это script -бесплатное решение.

<div class="row-fluid">
   <div class="span3" style="background-color:lightblue;margin:0px auto;float:none;">Description</div>
   <div class="span9" style="background-color:pink;clear:both;margin:0px auto;float:none;">
   Lorem ipsum Lorem ipsum  Lorem ipsum  Lorem ipsum  Lorem ipsum  Lorem ipsum  Lorem ipsum  ....
   </div>
</div>

Код в действии: jsFiddle

Просто удалите встроенный стиль и поместите его в свой файл css.

Ответ 7

$('.row').each(function() {
  var rowHeight = $(this).height();
  $(this).find("[class^='span']").each(function() {
    if ( $(this).height() < rowHeight-20) {
      var odstep = (rowHeight - $(this).height()) / 2 ; 
      $(this).css( "padding-top", odstep );
    }
  });
});