center - align - contenido del centro de cimentación zurb en la red
foundation offset (5)
Intenta agregar la clase centrada.
.five.columns.centered
Estoy tratando de centrar horizontalmente una imagen en una columna zurb pero parece imposible. Lo intenté todo, busqué por todas partes, pero no puedo hacerlo funcionar.
Aquí está mi código:
<div class="row">
<div class="twelve columns"><br />
<img src="img_06.jpeg" alt="slide image">
</div>
</div>
Actualmente, las imágenes de paisaje están bien en la cuadrícula de 12 columnas, pero cuando aparece una imagen vertical, está en el lado izquierdo de la cuadrícula. Si le doy un 25% de relleno, vaya al centro, pero estoy usando php para extraer todas las imágenes de una carpeta y generar el código sobre la marcha, así que no puedo tener un 25% de relleno en todas las imágenes ( el paisaje se encoge).
Gracias
La única forma en que puedo obtener una imagen centrada en Foundation 4 es cambiar para mostrar: bloque; para img en lugar de mostrar: inline-block;
Solo agrega la clase "centro de texto"
Usando la fundación 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; }
Edición noviembre 2015: en Foundation 6 echa un vistazo a los ayudantes de tipografía
Edición de abril de 2014: en Foundation 5 echa un vistazo a las clases de utilidad .
Respuesta original:
Usa la clase de centro de texto.
<div class="row">
<div class="twelve columns text-center"><br />
<img src="img_06.jpeg" alt="slide image">
</div>
</div>