Menu icon Foundation
centering content in a 1 column layout

Is there another way besides using Media Queries to center content in a 1 column layout?
Thanks!

<style>
 @media (min-width: 540px) and (max-width: 640px) {
    .info img {
        padding: 0 6rem;
	}
  }
  
 @media (min-width: 200px) and (max-width: 539px) {
    .info img {
		padding: 0 3rem;
	}
  }
</style>

            

         

Screen shot 2015 11 06 at 1.36.45 pm

ResponsivelayoutWebsites

Is there another way besides using Media Queries to center content in a 1 column layout?
Thanks!

<style>
 @media (min-width: 540px) and (max-width: 640px) {
    .info img {
        padding: 0 6rem;
	}
  }
  
 @media (min-width: 200px) and (max-width: 539px) {
    .info img {
		padding: 0 3rem;
	}
  }
</style>

            

         

Screen shot 2015 11 06 at 1.36.45 pm

This post has been closed. No new replies can be added.

Rafi Benkual about 4 years ago

Centering images can be done with CSS.

display: block;
margin: 0 auto;

You can center the grid columns if you use less than 12 in a row:

<div class="small-6 small-centered columns">

http://zurb.com/university/lessons/center-that-pesky-uneven-layout

sanlorena about 4 years ago

perfect, thank you Rafi!