vertical-align : middle avec Bootstrap 2

Question

vertical-align : middle avec Bootstrap 2

Demandé el 21 de Juillet, 2012: Quand la question a-t-elle été
88224 affichage: Nombre de visites la question a
5 Réponses: Nombre de réponses aux questions
Résolu: Situation réelle de la question

J'utilise le twitter bootstrap et je voulais aligner verticalement une 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é ça mais pas les wortks :

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

J'ai essayé ça aussi :

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

Aucun ne fonctionne. Quelqu'un a-t-il une idée ? Merci d'avance.

Demandé el 21 de Juillet, 2012 par bgondy

Answer 1

5 Réponses

Answer 2

17voto

Skrivener Points 740

Essayez ça :

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

Edit :

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

Vous devrez peut-être ajouter le float: none !important; 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 division de la ligne, alors pour conserver l'alignement vertical central, vous devrez définir la hauteur de ligne de la ligne pour qu'elle soit identique à la hauteur en pixels de la ligne (c'est-à-dire les deux à 300px dans votre cas). Si vous faites cela, vous remarquerez que les éléments enfants héritent de la hauteur de ligne, ce qui pose un problème dans ce cas, et vous devrez donc définir la hauteur de ligne pour les span3 à ce qu'elle devrait être (1,5 est la valeur d'exemple dans l'utilitaire, ou 1,5 x la taille de la police, que nous n'avons pas modifiée lorsque nous avons changé la hauteur de ligne).

Répondu el 16 de Juin, 2013 par Skrivener (740 Points )

Answer 3

4voto

Diego Sanches Points 41

Essayez de retirer le float de l'attribut span6 :

{ float:none !important; }

Répondu el 11 de Juin, 2013 par Diego Sanches (41 Points )

Answer 4

0voto

grandivory Points 429

Si je me souviens bien de ma propre utilisation de bootstrap, l'option .spanN sont flottantes, ce qui les fait automatiquement se comporter comme des classes display: block . Pour faire display: table-cell fonctionne, vous devez retirer le flotteur.

Répondu el 10 de Juin, 2013 par grandivory (429 Points )

Answer 5

0voto

Pr0tected V0id Points 21

De même que les réponses précédentes, vous pouvez toujours utiliser l'attribut 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>

Répondu el 11 de Juin, 2013 par Pr0tected V0id (21 Points )

Answer 6

0voto

atabak Points 31

J'utilise ceci

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

Répondu el 19 de Juin, 2013 par atabak (31 Points )

vertical-align : middle avec Bootstrap 2

Réponses

Edit :

Edit :

Questions en vedette

Top Tags

Prograide.com

Powered by:

vertical-align : middle avec Bootstrap 2

Réponses

Edit :

Edit :

Questions en vedette

Top Tags

Dans notre réseau

Prograide.com

Powered by: