vertical-align: middle avec Bootstrap 2

- Je utiliser le twitter bootstrap et je voulais aligner verticaly un div bloc 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é cela aussi:

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

Aucun n'est de travail. Est-ce que qqn a une idée?
Merci à l'avance.

  • Pouvez-vous faire un jsfiddle.net démo?
  • Y compris le twitter bootstrap fait crash jsfiddle... désolé
  • "fait jsfiddle crash" est une nébuleuse de déclaration.
  • C'est une façon de travailler autour d'un bootstrap inclure dans jsFiddle: jsfiddle.net/api/post/library/pure
  • Alors... jsfiddle.net/kwBuW?
  • Je n'ai pas vu la case à cocher pour la force du poignet désolé... j'ai été en utilisant le copier/coller... Pour mon problème, le code CSS que j'ai donné fonctionne bien sans bootstrap. Je pense que c'est un problème avec .spanN classes et .row parce qu'il est avant ou après le contenu avec la display: table propriété (lignes 437, 443, 183 dans le bootstrap). Désolé pour mon mauvais anglais...
  • essayez display:table-cell;

InformationsquelleAutor bgondy | 2012-07-21
  1. 17

    Essayez ceci:

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

    Edit:

    Violon: http://jsfiddle.net/EexYE/

    Vous devrez peut-être ajouter Diego float: none !important; aussi si span3 est flottant et il interfère.

    Edit:

    Violon: http://jsfiddle.net/D8McR/

    En réponse à Alberto: si vous corrigez la hauteur de la ligne div, puis de continuer à la verticale du centre de l'alignement, que vous aurez besoin pour définir la hauteur de la ligne de la ligne pour être la même que la hauteur en pixels de la ligne (c'est à dire. les deux à 300px dans votre cas). Si vous allez le faire, vous remarquerez que les éléments enfants héritent de la hauteur de la ligne, ce qui est un problème dans ce cas, il vous sera alors nécessaire de régler la hauteur de la ligne pour le span3s à ce qu'il devrait en fait être (1.5 est l'exemple de valeur dans le violon, ou 1,5 x la taille de police, dont nous n'avons pas changé lorsque nous avons changé la hauteur de la ligne).

    • Comment puis-je obtenir cela fonctionne par réglage de la hauteur de la ligne div? jsfiddle.net/EexYE/191
    • Voir l'édition supplémentaire pour le post ci-dessus. En bref, vous aurez besoin de définir la hauteur de la ligne de la ligne div à la hauteur que vous définissez, par exemple. la hauteur ET la hauteur de la ligne de 300px. Alors pour éviter que votre type d'image et afficher de façon incorrecte, vous devez définir la hauteur de la ligne de la span3s quelle que soit leur valeur correcte doit être, sinon il sera simplement hériter de la 300px à partir de la ligne div.
    InformationsquelleAutor Skrivener
  2. 4

    Essayez de supprimer le float attribut de span6:

    { float:none !important; }
    InformationsquelleAutor Diego Sanches
  3. 0

    Si je me souviens bien de ma propre utilisation de bootstrap, le .spanN classes sont flotté, ce qui fait automatiquement qu'ils se comportent comme display: block. Pour faire display: table-cell de travail, vous devez retirer le flotteur.

    InformationsquelleAutor grandivory
  4. 0

    Ainsi que les réponses précédentes sont, vous pouvez toujours utiliser la Traction attrib ainsi:

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

    InformationsquelleAutor Thomas.Donnelly
  5. 0

    - je utiliser 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>
    InformationsquelleAutor atabak