web-dev-qa-db-fra.com

Alignement vertical moyen avec grille sensible Bootstrap

J'ai un problème très simple sur le milieu vertical span en utilisant Bootstrap 2.3.2.

Exigences:

  1. Il y a deux colonnes, la colonne de gauche a une hauteur fixe de 300 pixels car il y a une image de 300 x 300 à l'intérieur.

  2. La colonne de droite contient du texte et doit être centrée sur la colonne de gauche.

  3. Le tout doit être réactif. C'est pourquoi j'utilise une image réactive.

  4. Si la deuxième colonne descend en bas, sa hauteur doit correspondre à la taille du texte. Cela signifie que je ne peux pas définir de hauteur fixe sur la deuxième colonne.

  5. Ne doit pas utiliser JS pour résoudre ce problème.

HTML:

<div class="container-fluid">
  <div class="row-fluid">
    <div class="span6">
        <img class="img-responsive" src="http://placehold.it/300x300"/>
    </div>
    <div class="span6 v-center">
        <div class="content">
            <h1>Title</h1>
            <p>Paragraph</p>
        </div>
    </div>
  </div>
</div>

CSS:

.v-center {
    display:table;
    border:2px solid gray;
    height:300px;
}

.content {
    display:table-cell;
    vertical-align:middle;
    text-align:center;
}

Mon code:http://jsfiddle.net/qhoc/F9ewn/1/

Vous pouvez voir ce que j'ai fait ci-dessus: en gros, je règle la deuxième colonne span comme table et middle la .content table-cellule. J'ai copié cette méthode ici Comment utiliser vertical align dans bootstrap (avec l'exemple de travail ici http://jsfiddle.net/lharby/AJAhR/ )

Mon défi est un peu différent en raison des exigences ci-dessus. Une idée sur la façon de le faire fonctionner? Merci.

htmlcsstwitter-bootstrapstylesheet
11
HP.

Ajoutez la règle !important à display: table de votre classe .v-center. 

.v-center {
    display:table !important;
    border:2px solid gray;
    height:300px;
}

Votre propriété d'affichage est remplacée par bootstrap en display: block. 

Exemple

12
Morpheus
.row {
    letter-spacing: -.31em;
    Word-spacing: -.43em;
}
.col-md-4 {
    float: none;
    display: inline-block;
    vertical-align: middle;
}

Remarque: .col-md-4 peut être n’importe quelle colonne de la grille, c’est juste un exemple ici.

0
arithran