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

NinjaFart · Accepted Answer · 2015-11-28T12:12:34.317

85

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

edited Nov 28 '15 at 12:12

answered Feb 06 '13 at 21:42

NinjaFart

1,626
1
20
24

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? – B-Money Aug 19 '13 at 06:21
1

+1 this is the best answer because the OP asked about foundation and this solution uses a built-in foundation class. – Brandon Aug 20 '13 at 01:05
I'm not sure if this was available before. Anyways, I've accepted this one as the correct answer. – Ando Jan 24 '14 at 05:43
Am I the only one frowning upon these utility classes? What's the difference with adding a `style="text-align: center"`? – sroes Nov 16 '15 at 13:54
@sroes There's no difference. If you are implying that this not semantic, you are correct. But then again most responsive frameworks isn't either. – NinjaFart Nov 16 '15 at 17:53
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. – sroes Nov 17 '15 at 08:11
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! – Maximus Jan 31 '16 at 04:30

score 4 · Answer 2 · answered Oct 02 '12 at 22:51

4

Try adding the centered class.

.five.columns.centered

answered Oct 02 '12 at 22:51

Nick Treadway

49
1

I can't see the class definition. Do I miss something? – Konrad Viltersten Oct 06 '12 at 15:06
3

This doesn't work! THis centers grid element and not content itself - read here http://foundation.zurb.com/docs/grid.php – renathy Oct 22 '12 at 12:34

score 3 · Answer 3 · answered May 29 '13 at 20:57

3

Just add the class "text-center"

answered May 29 '13 at 20:57

Flatron

687
6
18

score 2 · Answer 4 · answered Mar 07 '13 at 14:00

2

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

answered Mar 07 '13 at 14:00

jvalente

570
7
13

score 1 · Answer 5 · answered Apr 05 '13 at 20:51

1

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;

answered Apr 05 '13 at 20:51

user2250677

11
1

zurb foundation center content in the grid

5 Answers5

Linked