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