Menu
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/
916
If you're centering an entire block element, such as a div, the text-align property won't work. (Note that it does work when centering the content inside a div.) Instead, you can use the margin property to center the entire element.
Short answer: your text isn't centered because the elements are floated, and floated elements "shrink" to the content, even if it's a block level element.
You can't center divs with margin: 0 auto; if you have not set width to element. Add width to . top-center to make it work.
You can do this by setting the display property to "flex." Then define the align-items and justify-content property to “center.” This will tell the browser to center the flex item (the div within the div) vertically and horizontally.
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;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With