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
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>
Essayez d'ajouter la classe centrée.
.five.columns.centered
Ajoutez simplement la classe "text-center"
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; }
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;