Skip directly to content

Center a Div inside another Div when you don't know any widths (i.e. for various mobile devices)

 
on Wed, 09/12/2012 - 19:21

So you have a responsive layout, and for the smallest format (mobile) you want to be able to center some Divs.

The
margin: 0 auto;
things only works when you know widths.... but you have several mobile devices with different widths....
Oh no..... what to do?

 

You can use this

 

 

#outer {
  width: 100%;
  text-align: center;
}

#inner {
  display: inline-block;
}

That makes the inner div into an inline element that can be centered with text-align.

Now that doesn't work on IE7 or less..... but this is mobile layout only. 

So who cares?  

 

Tags: 

Comments

adrianart.com's picture

“Center a Div inside another Div when you don't know any widths (i.e. for various mobile devices) | Code Journeymen LLC” was indeed a terrific post, cannot wait to go through alot more of ur articles. Time to waste numerous time on-line lolz. Thanks for the post ,Gonzalo

bbw's picture

Hi there! This article could not be written much better!
Going through this article reminds me of my previous roommate!
He continually kept preaching about this. I am going to forward this post to him.
Fairly certain he'll have a good read. Thank you for sharing!

Pages

Post new comment