zurb foundation center contenido en la cuadrícula


Estoy tratando de centrar horizontalmente una imagen en una columna zurb, pero parece imposible. Lo intenté todo, busqué por todas partes, pero no puedo hacer que funcione.

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 de retrato, está en el lado izquierdo de la cuadrícula. Si le doy un relleno del 25%, irá al centro, pero estoy usando php para extraer todas las imágenes de una carpeta y generar el código sobre la marcha, por lo que no puedo tener un 25% de relleno en todas las imágenes (las horizontales se encogen).

Gracias

Author: Ando, 2012-08-22

5 answers

Editar Noviembre de 2015: {[3] } En Fundación 6 echa un vistazo a Ayudantes de tipografía


Editar Abril de 2014: En Foundation 5 echa un vistazo a Clases de utilidad.


Respuesta original:

Utilice la clase text-center.

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

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

 81
Author: NinjaFart,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-11-28 12:12:34

Intente agregar la clase centrada.

.five.columns.centered
 4
Author: Nick Treadway,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2012-10-02 22:51:24

Simplemente agregue la clase "text-center"

 3
Author: Flatron,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-05-29 20:57:01

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; }
 2
Author: jvalente,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-03-07 14:00:11

La única forma en que puedo obtener una imagen centrada en Foundation 4 es cambiar a display:block; para img en lugar de display:inline-block;

 1
Author: user2250677,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-04-05 20:51:26