zurb foundation center content in the grid

Question

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

China

Answer 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

Droopy

This answer is best since it uses an existing css style. Creating a new class just adds bloat, wonk, meh and filler. The question then floats into my mind about where the documentation is regarding this 'text-center' class. Maybe I just missed it? – Napalm

+1 this is the best answer because the OP asked about foundation and this solution uses a built-in foundation class. – Vesperal

I'm not sure if this was available before. Anyways, I've accepted this one as the correct answer. – China

Am I the only one frowning upon these utility classes? What's the difference with adding a style="text-align: center"? – Tallahassee

@Tallahassee There's no difference. If you are implying that this not semantic, you are correct. But then again most responsive frameworks isn't either. – Droopy

For me there's a difference in these global utility classes and unsemantic classes that act as a modifier for some component (like small-6 for the grid etc.). I still see using utility classes as a bad practice. – Tallahassee

What a lifesaver. I didn't realize that I had to add the text-center to the parent div (since you can just add this style to any p-tag and it works). Now my buttons float right in the middle! – Creaturely

Answer 2

Try adding the centered class.

.five.columns.centered

Exum

I can't see the class definition. Do I miss something? – Sustentation

This doesn't work! THis centers grid element and not content itself - read here foundation.zurb.com/docs/grid.php – Niggerhead

Answer 3

Just add the class "text-center"

Helotism

Answer 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; }

Agrigento

Answer 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;

Darnell