子アイテムの幅を取得してブロックを中央に配置する方法

Question

"category_images"には子の幅がありますので、 "category_images"は "category_images_wrapper"の "margin：0 auto"の中央に置くことができます。
現在、「category_images」は、親「category_images_wrapper」の幅を持ち、中央に配置されません。

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; 
    } 

フィドル：https://jsfiddle.net/kn05uv4k/

おかげでたくさん！

Answer 1

フレックスボックスを使用してセンタリングすることができます。また、私はあなたが応答性の問題のために要素の固定幅を使用しないことをお勧めします。

あなたがwidth:calc(50% - 30px)を追加する1行の2つの項目を設定したい場合は、30pxは左右の余白

の合計が、これはあなたが

.category_images_wrapper{ 
 
    max-width:1050px; 
 
    margin:0 auto; 
 
} 
 
.category_images{ 
 
\t display: flex; 
 
    flex-wrap: wrap; 
 
\t 
 
} 
 
.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{ 
 
\t color: white; 
 
    font-weight: bold; 
 
    font-size: 32px; 
 
    font-style: italic; 
 
\t z-index: 100; 
 
\t position: absolute; 
 
\t width:100%; 
 
\t text-align:center; 
 
\t top:120px; 
 
} 
 
.category_images_img{ 
 
\t width:100%; 
 
\t height:100%; 
 
\t transition: all 0.8s ease; 
 
\t 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>

を探していたものであるなら、私に知らせていますマージンを使用してそれを設定する必要はありません

Answer 2

、あなたはflexboxまたはinline-blockを使用して設定することができます...

.category_images_wrapper{ 
 
    max-width:1050px; 
 
    margin:0 auto; 
 
} 
 
.category_images{ 
 
\t text-align: center; 
 
} 
 
.category_images_item{ 
 
\t width: 310px; 
 
\t height: 280px; 
 
    display: inline-block; 
 
\t position:relative; 
 
    background-color: black; 
 
\t overflow:hidden; 
 
\t transition: all 0.8s ease; 
 
\t margin-left:25px; 
 
    margin-top:25px; 
 
} 
 
.category_images_item span{ 
 
\t color: white; 
 
    font-weight: bold; 
 
    font-size: 32px; 
 
    font-style: italic; 
 
\t z-index: 100; 
 
\t position: absolute; 
 
\t width:100%; 
 
\t text-align:center; 
 
\t top:120px; 
 
    left: 0px; 
 
} 
 
.category_images_img{ 
 
\t width:310px; 
 
\t height:280px; 
 
\t transition: all 0.8s ease; 
 
\t 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>