zurb foundation center content in the grid

问题

I'm trying to center horizontally an image into a zurb column but it seems impossible. I tried everything, searched everywhere, but I cant get it to work.

Here is my code:

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

currently landscape images are alright on the 12 column grid, but when a portrait image comes along it is on the left side of the grid. If i give it a 25% padding it goest to the center, but I'm using php to pull all the images from a folder and generate the code on the fly, so i can't have 25% padding on all the images (landscape ones shrink).

Thanks

回答1:

Edit November 2015: In Foundation 6 check out Typography Helpers

Edit April 2014: In Foundation 5 check out Utility classes.

Original answer:

Use the text-center class.

<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

回答2:

Try adding the centered class.

.five.columns.centered

回答3:

Just add the class "text-center"

回答4:

Using foundation 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; }

回答5:

The only way I can get an image centered in Foundation 4 is to change to display:block; for img instead of display:inline-block;

来源：https://stackoverflow.com/questions/12079049/zurb-foundation-center-content-in-the-grid

标签

zurb-foundation

centering