I want that "category_images" has the width of its childs, so the "category_images" can get centered with "margin: 0 auto" from "category_images_wrapper".
Currently "category_images" has the width of its parent "category_images_wrapper" and it does not get centered.
HTML:
<center><h2>Featured Categories</h2></center>
<div class="category_images_wrapper">
<div class="category_images">
<!--First image-->
<div class="category_images_item">
<a href="">
<span>Watches</span>
<div class="category_images_img" style="background: url(https://static.pexels.com/photos/1279/fashion-wristwatch-time-watch.jpg)no-repeat center;background-size:cover;">
</div>
</a>
</div>
<!--second image-->
<div class="category_images_item">
<a href="">
<span>Gadgets</span>
<div class="category_images_img" style="background: url(https://static.pexels.com/photos/1279/fashion-wristwatch-time-watch.jpg)no-repeat center;background-size:cover;">
</div>
</a>
</div>
<!--third image-->
<div class="category_images_item">
<a href="">
<span>Headshop</span>
<div class="category_images_img" style="background: url(https://static.pexels.com/photos/1279/fashion-wristwatch-time-watch.jpg)no-repeat center;background-size:cover;">
</div>
</a>
</div>
<!--fourth image-->
<div class="category_images_item">
<a href="">
<span>test</span>
<div class="category_images_img" style="background: url(https://static.pexels.com/photos/1279/fashion-wristwatch-time-watch.jpg)no-repeat center;background-size:cover;">
</div>
</a>
</div>
<!--fifth image-->
<div class="category_images_item">
<a href="">
<span>test</span>
<div class="category_images_img" style="background: url(https://static.pexels.com/photos/1279/fashion-wristwatch-time-watch.jpg)no-repeat center;background-size:cover;">
</div>
</a>
</div>
<!--sixth image-->
<div class="category_images_item">
<a href="">
<span>teeest</span>
<div class="category_images_img" style="background: url(https://static.pexels.com/photos/1279/fashion-wristwatch-time-watch.jpg)no-repeat center;background-size:cover;">
</div>
</a>
</div>
<div style="clear: both"></div>
</div>
</div>
CSS:
.category_images_wrapper{
max-width:1050px;
margin:0 auto;
}
.category_images{
}
.category_images_item{
width: 310px;
height: 280px;
float:left;
position:relative;
background-color: black;
overflow:hidden;
transition: all 0.8s ease;
margin-left:25px;
margin-top:25px;
}
.category_images_item span{
color: white;
font-weight: bold;
font-size: 32px;
font-style: italic;
z-index: 100;
position: absolute;
width:100%;
text-align:center;
top:120px;
}
.category_images_img{
width:310px;
height:280px;
transition: all 0.8s ease;
opacity:0.7;
}
.category_images_item:hover .category_images_img{
transform: scale(1.06) rotate(-2deg);
opacity: 0.5;
}
Fiddle: https://jsfiddle.net/kn05uv4k/
Thanks alot!
you can center them using flex-box . also i advise you don't use fixed widths for element due to responsiveness concerns .
if you want to set 2 items on one row add width:calc(50% - 30px) , 30px is the sum of the left-right margins
let me know if this is what you were looking for
.category_images_wrapper{
max-width:1050px;
margin:0 auto;
}
.category_images{
display: flex;
flex-wrap: wrap;
}
.category_images_item{
height: 280px;
position: relative;
background-color: black;
overflow: hidden;
transition: all 0.8s ease;
margin: 15px 15px 0;
width: calc(50% - 30px);
}
.category_images_item span{
color: white;
font-weight: bold;
font-size: 32px;
font-style: italic;
z-index: 100;
position: absolute;
width:100%;
text-align:center;
top:120px;
}
.category_images_img{
width:100%;
height:100%;
transition: all 0.8s ease;
opacity:0.7;
}
.category_images_item:hover .category_images_img{
transform: scale(1.06) rotate(-2deg);
opacity: 0.5;
}<center><h2>Featured Categories</h2></center>
<div class="category_images_wrapper">
<div class="category_images">
<!--First image-->
<div class="category_images_item">
<a href="">
<span>Watches</span>
<div class="category_images_img" style="background: url(https://static.pexels.com/photos/1279/fashion-wristwatch-time-watch.jpg)no-repeat center;background-size:cover;">
</div>
</a>
</div>
<!--second image-->
<div class="category_images_item">
<a href="">
<span>Gadgets</span>
<div class="category_images_img" style="background: url(https://static.pexels.com/photos/1279/fashion-wristwatch-time-watch.jpg)no-repeat center;background-size:cover;">
</div>
</a>
</div>
<!--third image-->
<div class="category_images_item">
<a href="">
<span>Headshop</span>
<div class="category_images_img" style="background: url(https://static.pexels.com/photos/1279/fashion-wristwatch-time-watch.jpg)no-repeat center;background-size:cover;">
</div>
</a>
</div>
<!--fourth image-->
<div class="category_images_item">
<a href="">
<span>test</span>
<div class="category_images_img" style="background: url(https://static.pexels.com/photos/1279/fashion-wristwatch-time-watch.jpg)no-repeat center;background-size:cover;">
</div>
</a>
</div>
<!--fifth image-->
<div class="category_images_item">
<a href="">
<span>test</span>
<div class="category_images_img" style="background: url(https://static.pexels.com/photos/1279/fashion-wristwatch-time-watch.jpg)no-repeat center;background-size:cover;">
</div>
</a>
</div>
<!--sixth image-->
<div class="category_images_item">
<a href="">
<span>teeest</span>
<div class="category_images_img" style="background: url(https://static.pexels.com/photos/1279/fashion-wristwatch-time-watch.jpg)no-repeat center;background-size:cover;">
</div>
</a>
</div>
<div style="clear: both"></div>
</div>
</div></div>
There is no need to set it using margin, You can set it using flexbox or inline-block...
.category_images_wrapper{
max-width:1050px;
margin:0 auto;
}
.category_images{
text-align: center;
}
.category_images_item{
width: 310px;
height: 280px;
display: inline-block;
position:relative;
background-color: black;
overflow:hidden;
transition: all 0.8s ease;
margin-left:25px;
margin-top:25px;
}
.category_images_item span{
color: white;
font-weight: bold;
font-size: 32px;
font-style: italic;
z-index: 100;
position: absolute;
width:100%;
text-align:center;
top:120px;
left: 0px;
}
.category_images_img{
width:310px;
height:280px;
transition: all 0.8s ease;
opacity:0.7;
}
.category_images_item:hover .category_images_img{
transform: scale(1.06) rotate(-2deg);
opacity: 0.5;
}<center><h2>Featured Categories</h2></center>
<div class="category_images_wrapper">
<div class="category_images">
<!--First image-->
<div class="category_images_item">
<a href="">
<span>Watches</span>
<div class="category_images_img" style="background: url(https://static.pexels.com/photos/1279/fashion-wristwatch-time-watch.jpg)no-repeat center;background-size:cover;">
</div>
</a>
</div>
<!--second image-->
<div class="category_images_item">
<a href="">
<span>Gadgets</span>
<div class="category_images_img" style="background: url(https://static.pexels.com/photos/1279/fashion-wristwatch-time-watch.jpg)no-repeat center;background-size:cover;">
</div>
</a>
</div>
<!--third image-->
<div class="category_images_item">
<a href="">
<span>Headshop</span>
<div class="category_images_img" style="background: url(https://static.pexels.com/photos/1279/fashion-wristwatch-time-watch.jpg)no-repeat center;background-size:cover;">
</div>
</a>
</div>
<!--fourth image-->
<div class="category_images_item">
<a href="">
<span>test</span>
<div class="category_images_img" style="background: url(https://static.pexels.com/photos/1279/fashion-wristwatch-time-watch.jpg)no-repeat center;background-size:cover;">
</div>
</a>
</div>
<!--fifth image-->
<div class="category_images_item">
<a href="">
<span>test</span>
<div class="category_images_img" style="background: url(https://static.pexels.com/photos/1279/fashion-wristwatch-time-watch.jpg)no-repeat center;background-size:cover;">
</div>
</a>
</div>
<!--sixth image-->
<div class="category_images_item">
<a href="">
<span>teeest</span>
<div class="category_images_img" style="background: url(https://static.pexels.com/photos/1279/fashion-wristwatch-time-watch.jpg)no-repeat center;background-size:cover;">
</div>
</a>
</div>
<div style="clear: both"></div>
</div>
</div></div>