web-dev-qa-db-fra.com

contenu du centre de fondation zurb dans la grille

J'essaie de centrer horizontalement une image dans une colonne zurb mais cela semble impossible. J'ai tout essayé, fouillé partout, mais je ne peux pas le faire fonctionner.

Voici mon code:

<div class="row">
    <div class="twelve columns"><br />
        <img src="img_06.jpeg" alt="slide image">
    </div>
</div>

actuellement, les images de paysage sont correctes sur la grille à 12 colonnes, mais lorsqu'une image de portrait arrive, elle se trouve sur le côté gauche de la grille. Si je lui donne un rembourrage de 25%, il va au centre, mais j'utilise php pour extraire toutes les images d'un dossier et générer le code à la volée, donc je ne peux pas avoir un rembourrage de 25% sur toutes les images ( ceux du paysage rétrécissent).

Merci

zurb-foundationcentering
27
Ando

Modifier novembre 2015: Dans Foundation 6, consultez Aides à la typographie

Modifier avril 2014: Dans Foundation 5, consultez Classes utilitaires .

Réponse originale:

Utilisez la classe text-center.

<div class="row">
    <div class="twelve columns text-center"><br />
        <img src="img_06.jpeg" alt="slide image">
    </div>
</div>

Source: https://github.com/zurb/foundation/pull/224

82
NinjaFart

Essayez d'ajouter la classe centrée.

.five.columns.centered
4
Nick Treadway

Ajoutez simplement la classe "text-center"

3
Flatron

Utilisation de la fondation 4:

HTML:

<div class="row">
    <div id="wrap-img" class="large-12 columns"><br />
        <img src="img_06.jpeg" alt="slide image">
    </div>
</div>

CSS:

#wrap-img img { margin: 0 auto; }
2
jvalente

La seule façon d'obtenir une image centrée dans Foundation 4 est de changer pour afficher: block; pour img au lieu de display: inline-block;

1
user2250677