0

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!

celsomtrindade
  • 4,501
  • 18
  • 61
  • 116
  • In the future, please post your code here as well, instead of just the codepen. If codepen ever shuts down, this question wont' be able to help people reading it. – Kelderic Mar 17 '14 at 15:43
  • Yeah, i was in a hurry, so that was the fastest way. But i´ll keep that in mind =D – celsomtrindade Mar 17 '14 at 21:51

1 Answers1

5

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;
}
Chad
  • 5,308
  • 4
  • 24
  • 36
  • +1 Also mind [the gap](http://stackoverflow.com/questions/21875226/space-between-nowrap-inline-blocks/21875532#21875532) between inline(-block) elements. – Hashem Qolami Mar 17 '14 at 16:38
  • @HashemQolami just trying to tackle the issue that OP is having :) There are a lot of other things to consider, but there are resources out there for those separate issues. – Chad Mar 17 '14 at 16:49
  • The Id/Class problem was only when i posted in the codepen, in my website is ok. I'll give it a try to test it. I'll be back to tell you if i was able to fix that. Thanks for now. – celsomtrindade Mar 17 '14 at 16:53
  • @Chad Of course! just saying :) as the extra white space increases the space between the blocks and it may break the layout generally. – Hashem Qolami Mar 17 '14 at 16:57
  • I could made it work! I little complex, i'm kind of new to those css tricks and tips. But i think i'm getting the way to do the stuffs. =D Thanks! – celsomtrindade Mar 17 '14 at 22:25