CODEWITHSUNDEEP
htmlcss
celsomtrindade
celsomtrindade

Reputation: 4671

Align div content in the middle using only auto or %

i'm with some problems here.. I've tried a lot of different fixes for this, but none of them seems to work. I want to align the content of a div in the middle of another div.

I want to use only auto or % values because i want to make the website also for mobile devices.

This is the code i have so far: http://codepen.io/anon/pen/xHpaF/ I want to make those red boxes aligned to the center of the wrap div.

If anyone can help me. Thanks!

Upvotes: 0

Views: 68

Answers (1)

Chad
Chad

Reputation: 5428

Well, first of all, your <div id="content" /> is an ID, not a class. So change your .content in the CSS to #content. Second of all, float throws off the text-align: center;. If you remove that, and set it to display: inline-block;, it should fix your issues:

check it here: http://codepen.io/anon/pen/ncviE/

css changes: 

#content {
  width:auto; 
  height:250px; 
  margin:0 auto; 
  background:#0C0; 
  display:table-cell; 
  text-align:center;
}

.view {
   display: inline-block;
   float: none;
}

Upvotes: 5

Related Questions