web-dev-qa-db-fra.com

Bootstrap Vertical Align Image

Sur ce site Web: http://www.livenews.surf/ Je veux faire aligner verticalement les images et le texte des actualités, comment puis-je faire cela?

csshtml5imagecss3vertical-alignment
12
Gonçalo Loureiro

La solution la plus simple consiste à utiliser Flexbox (voir les spécifications pour plus de détails sur son utilisation).

Dans ce cas particulier, attribuez une classe personnalisée à chacun de vos contenus contenant div (actuellement, il ne dispose que de .col-md-11), par exemple la classe "contenu" et ajoutez ce code à votre feuille de style

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

Explication du petit code: align-items aligne les éléments verticalement, car nous avons laissé la direction de flexion par défaut qui est la ligne et flex-wrap permettra à notre conteneur parent d'envelopper les enfants à la ligne suivante (la valeur par défaut est nowrap).

Gardez à l'esprit que je n'ai pas inclus de préfixe de fournisseur pour cette réponse, mais je vous recommande fortement de le faire, en utilisant un outil tel que le préfixe automatique.

25
Leo Napoleon

Utilisez les classes suivantes dans votre conteneur div.row au lieu du CSS personnalisé comme suggéré pour bootstrap 4.

d-flex flex-wrap align-items-center

22
jcaruso

Eh bien, comme vous utilisez les colonnes bootstrap, vous devrez donc procéder en suivant quelques étapes comme expliqué ci-dessous:

En règle générale, la 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 devrez rendre la hauteur des deux colonnes (image + texte) identique. Pour cela, vous pouvez utiliser jQuery matchHeight . Après cela, vous pouvez centrer vos images verticalement à l'aide des modifications suivantes.

<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%;
}

Voici Plnkr .

5
Mohammad Usman