Vertical-align: средний с Bootstrap 2

Я использую бутстрап twitter, и я хотел бы выровнять вертикальный блок div с изображением и текстом справа.

Вот код:

<ol class="row" id="possibilities">
     <li class="span6">
         <div class="row">
             <div class="span3">
                 <p>some text here</p>
                 <p>Text Here too</p>
             </div>
             <figure class="span3"><img src="img/screenshots/options.png" alt="Some text" /></figure>
         </div>
     </li>
     <li class="span6">
         <div class="row">
             <figure class="span3"><img src="img/qrcode.png" alt="Some text" /></figure>
             <div class="span3">
                 <p>Some text</p>
                 <p>Some text here too.</p>
             </div>
         </div>
     </li>
</ol>

Я пробовал это, но не wortks:

.span6 .row{display: table;}
.span6 .row .span3, .span6 .row figure{display:table-cell; vertical-align: middle;}

Я тоже пробовал:

.span6 .row .span3{display: inline-block; vertical-align: middle;}

Нет работает. У кого-то есть идея? Спасибо заранее.

Ответ 1

Попробуйте следующее:

.row > .span3 {
    display: inline-block !important;
    vertical-align: middle !important;
}

Изменить:

Fiddle: http://jsfiddle.net/EexYE/

Возможно, вам потребуется добавить Diego float: none !important;, если span3 плавает, и он вмешивается.

Изменить:

Fiddle: http://jsfiddle.net/D8McR/

В ответ на Alberto: если вы зафиксируете высоту строки div, то для продолжения вертикального выравнивания по центру вам нужно будет установить высоту строки строки так же, как высота пикселя строки ( т.е. до 300px в вашем случае). Если вы это сделаете, вы заметите, что дочерние элементы наследуют высоту строки, что является проблемой в этом случае, поэтому вам нужно будет установить высоту строки для span3s на то, что она на самом деле должна быть (1.5 - это пример значения в скрипке или 1.5 x размер шрифта, который мы не изменили при изменении высоты строки).

Ответ 2

Попробуйте удалить атрибут float из span6:

{ float:none !important; }

Ответ 3

Если я правильно помню из собственного использования бутстрапа, плавают классы .spanN, что автоматически заставляет их вести себя как display: block. Чтобы сделать работу display: table-cell, вам нужно удалить float.

Ответ 4

Как и в предыдущих ответах, вы всегда можете использовать атрибут Pull:

    <ol class="row" id="possibilities">
       <li class="span6">
         <div class="row">
           <div class="span3">
             <p>some text here</p>
             <p>Text Here too</p>
           </div>
         <figure class="span3 pull-right"><img src="img/screenshots/options.png" alt="Some text" /></figure>
        </div>
 </li>
 <li class="span6">
     <div class="row">
         <figure class="span3"><img src="img/qrcode.png" alt="Some text" /></figure>
         <div class="span3">
             <p>Some text</p>
             <p>Some text here too.</p>
         </div>
     </div>
 </li>

Ответ 5

Я использую этот

<style>
html, body{height:100%;margin:0;padding:0 0} 
.container-fluid{height:100%;display:table;width:100%;padding-right:0;padding-left: 0}   
.row-fluid{height:100%;display:table-cell;vertical-align:middle;width:100%}
.centering{float:none;margin:0 auto} 
</style>
<body>
<div class="container-fluid">
     <div class="row-fluid">
     <div class="offset3 span6 centering">
            content here
         </div>
    </div>
 </div>
</body>