text-align:center not working with div elements
I've been searching for about 45 minutes and couldn't find a solution for my issue here. I want my gallery class divs (these will get created dynamically) to align them selves in the center of the gallery_container div using only css rules. I'm learning so any explanation would be helpful!
Thanks in advance!
<head>
<style>
#gallery_container{
text-align: center;
width:100%;
overflow: auto;
background:orange;
}
.gallery{
text-align: left;
border-style: solid;
border-width:3px;
border-top-left-radius: 40px;
border-bottom-right-radius: 40px;
background:yellow;
width:335px;
padding:20px;
float:left;
margin:15px;
}
.gallery h2{
margin-top:0;
}
.gallery img{
height:120px;
width:160px;
float:right;
}
</style>
<body>
<div id ='content_gallery'>
<h2>Gallery</h2>
<div id='gallery_container'>
<div class = gallery>
<img src = 'bowling_01.png'>
<h2>Company bowling</h2>
<h4>Date: June 14, 2013</h4>
<p>The company heads to Boca Bowl for our monthly bowling event!</p>
</div>
<div class = gallery>
<img src = 'bowling_01.png'>
<h2>Company bowling</h2>
<h4>Date: June 14, 2013</h4>
<p>The company heads to Boca Bowl for our monthly bowling event!</p>
</div>
<div class = gallery>
<img src = 'bowling_01.png'>
<h2>Company bowling</h2>
<h4>Date: June 14, 2013</h4>
<p>The company heads to Boca Bowl for our monthly bowling event!</p>
</div>
</div>
</div>
</body>
and here the fiddle http://jsfiddle.net/9gwKc/1/
Answer
This can be done with by using an inline-block display, the float:left will always send the elements to their furthest left possible.
.gallery {
text-align: left;
border-style: solid;
border-width:3px;
border-top-left-radius: 40px;
border-bottom-right-radius: 40px;
background:yellow;
width:335px;
padding:20px;
/*float:left; remove this*/
margin:15px;
/*add this*/
display:inline-block;
position:relative;
}