php - 如何获得子项的宽度，以便我可以将 block 居中

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

fiddle :https://jsfiddle.net/kn05uv4k/

非常感谢!

Answer 1

您可以使用 flex-box 将它们居中。由于响应性问题，我还建议您不要对元素使用固定宽度。

如果要在一行中设置 2 个元素，请添加 width:calc(50% - 30px) ，30px 是左右边距的总和

如果这就是你要找的，请告诉我

.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>