vertical-align: milieu avec Bootstrap 2

j'utilise le bootstrap twitter et je voulais aligner verticalement un bloc div avec une image et le texte à droite.

voici le code: 

<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>

j'ai essayé ceci mais pas wortks: 

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

j'ai essayé aussi: 

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

aucun ne fonctionne. Est-ce que qqn a une idée? Merci à l'avance.

31
demandé sur Chris Moschini 2012-07-21 16:46:01

5 réponses

essayez ceci: 

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

Edit:

violon: http://jsfiddle.net/EexYE/

vous pourriez avoir besoin d'ajouter le float: none !important; de Diego aussi si span3 est flottant et qu'il interfère.

Edit:

violon: http://jsfiddle.net/D8McR/

en réponse à Alberto: si vous fixez la hauteur de la ligne div, puis à continuer l'alignement du centre vertical vous aurez besoin de définir la ligne-hauteur de la rangée pour être la même que la hauteur du pixel de la rangée (C.-à-d. les deux à 300px dans votre cas). Si vous le faites, vous remarquerez que les éléments enfants héritent de la hauteur de ligne, ce qui est un problème dans ce cas, donc vous aurez besoin de régler votre hauteur de ligne pour les span3s à ce qu'elle devrait être (1,5 est la valeur d'exemple dans le violon, ou 1,5 x la taille de police, que nous n'avons pas changé lorsque nous avons changé la hauteur de ligne).

17
répondu Skrivener 2013-10-29 22:22:31

essayez de supprimer l'attribut float de span6: 

{ float:none !important; }
4
répondu Diego Sanches 2013-10-29 22:07:59

si je me souviens bien de ma propre utilisation de bootstrap, les classes .spanN sont flottées, ce qui les fait se comporter automatiquement comme display: block . Pour faire fonctionner display: table-cell , vous devez enlever le flotteur.

0
répondu grandivory 2013-06-10 23:10:43

ainsi que les réponses précédentes sont que vous pourriez toujours utiliser L'attrib Pull aussi bien: 

    <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>

0
répondu Thomas.Donnelly 2013-06-11 21:07:34

j'utilise ce 

<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>
0
répondu atabak 2013-06-19 21:22:43