I searched for about 45 minutes and could not find a solution to my problem here. I want my div gallery classes (they were created dynamically) to align themselves in the center of div_ gallery_container using only css rules. I find out that 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 is the fiddle http://jsfiddle.net/9gwKc/1/
source share