zub foundation center Inhalt im Raster

Ich versuche horizontal ein Bild in eine Spalte zu zentrieren, aber es scheint unmöglich. Ich habe alles versucht, überall gesucht, aber ich kann es nicht zur Arbeit bringen.zub foundation center Inhalt im Raster

Hier ist mein Code:

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

derzeit Landschaftsbilder sind auf den 12-Säule Gitter in Ordnung, aber wenn ein Porträtbild entlang er kommt, ist auf der linken Seite des Gitters. Wenn ich es 25% Padding gebe, geht es in die Mitte, aber ich benutze PHP, um alle Bilder aus einem Ordner zu ziehen und den Code im laufenden Betrieb zu generieren, so dass ich nicht 25% Padding auf allen Bildern haben kann (landschaftliche schrumpfen).

Danke

Quelle

2012-08-22 Ando

bearbeiten November 2015: In Foundation 6 Check out Typography Helpers

bearbeiten April 2014: In Foundation 5 Check-out Utility classes.

Ursprüngliche Antwort:

den Text-Center-Klasse.

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

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

Quelle

2013-02-06 21:42:59 NinjaFart

Diese Antwort ist am besten, da sie einen vorhandenen CSS-Stil verwendet. Das Erstellen einer neuen Klasse fügt einfach Bloat, Wonk, Meh und Filler hinzu. Dann fällt mir die Frage auf, wo sich die Dokumentation zu dieser "Text-Center" -Klasse befindet. Vielleicht habe ich es gerade verpasst? –

+1 Dies ist die beste Antwort, da das OP nach der Foundation gefragt hat und diese Lösung eine integrierte Foundation-Klasse verwendet. – Brandon

Ich bin mir nicht sicher, ob das vorher verfügbar war. Wie auch immer, ich habe diese als die richtige Antwort akzeptiert. – Ando

Versuchen Sie, die zentrierte Klasse hinzuzufügen.

.five.columns.centered

Quelle

2012-10-02 22:51:24

Ich kann die Klassendefinition nicht sehen. Vermisse ich etwas? –

Dies funktioniert nicht! THis zentriert Gitterelement und nicht Inhalt selbst - lesen Sie hier http://foundation.zurb.com/docs/grid.php – renathy

Mit Fundament 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; }

Quelle

2013-03-07 14:00:11 jvalente

Die einzige Art, wie ich ein Bild zentriert bekommen kann Ein gefunden Die 4 soll zur Anzeige wechseln: Block; für img statt display: Inline-Block;

Quelle

2013-04-05 20:51:26 user2250677

Fügen Sie einfach die Klasse "text-center"

Quelle

2013-05-29 20:57:01 Flatron

zub foundation center Inhalt im Raster

Antwort

Verwandte Themen