Bootstrap Vertical Align Image

Sur ce site: http://www.livenews.surf/ je veux faire de nouvelles images et de texte verticalement au moyen d'aligner, comment je peux faire?

  • stackoverflow.com/a/28456704/1816407
  • S'il vous plaît, joindre certains de la cible de code à votre question. Si le site du lien qui se passe à disparaître (ou tout simplement des modifications de son contenu), il n'y aura pas de référence de ce qui se passe.
InformationsquelleAutor Gonçalo Loureiro | 2016-05-11
  1. 22

    La solution la plus simple est d'utiliser Flexbox (voir spec. pour plus de détails sur son utilisation).

    Pour ce cas particulier, d'attribuer une classe personnalisée pour chacun de vos contenu du div contenant (actuellement il n'a que .col-md-11), par exemple la classe "contenu" et d'ajouter ce code à votre feuille de style

    .content {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

    Petite explication du code: align-items aligne les éléments verticalement, depuis que nous avons quitté le défaut flex direction qui est en ligne et flex-wrap permettra à notre conteneur parent pour envelopper les enfants à la ligne suivante (la valeur par défaut est nowrap).

    Gardez à l'esprit que je n'ai pas inclus vendeur préfixes pour le bien de cette réponse, cependant je vous recommandons fortement de le faire, à l'aide d'un outil tel que Autoprefixer.

    • De travail! Merci!
    • Voir la réponse ci-dessous pour bootstrap 4
    InformationsquelleAutor Leo Napoleon
  2. 18

    Utiliser les classes suivantes dans votre contenant div.row au lieu de CSS personnalisé comme suggéré pour bootstrap 4.

    d-flex flex-wrap align-items-center

    • solution de travail, Merci!
    • Parfait Bootstrap solution! ajouté classes contenant div.row
    • Yep, c'est celui que vous voulez
    InformationsquelleAutor jcaruso
  3. 5

    Bien, Que vous êtes en utilisant bootstrap colonnes, de sorte que vous aurez besoin pour faire en suivant quelques étapes expliquées ci-dessous:

    Comme un cas général d'une structure html de votre page web est la suivante:

    <div class="col-md-11">
    <div class="col-md-5">
        <a href="#">
            <img src="images/image.jgp">
        </a>
    </div>
    <div class="col-md-7">
       //text goes here
    </div>
</div>

    Tout d'abord, vous aurez besoin de prendre de la hauteur des deux colonnes (image + texte) même. Pour cela, vous pouvez utiliser jQuery matchHeight.
    Après cela, vous pouvez rendre vos images centrée verticalement avec l'aide de la suite de changement.

    <div class="col-md-5 photo">
    <a href="#">
        <img src="images/image.jgp">
    </a>
</div>

.photo {
    display: table;
}
.photo a {
    vertical-align: middle;
    display: table-cell;
}
.photo img {
    display: block;
    height: auto;
    width: 100%;
}

    Ici est Plnkr.

    InformationsquelleAutor Mohammad Usman