如何获得子项的宽度，所以我可以将块居中

时间：2017-04-27 08:27:51

标签： php html css

我想要＆＃34; category_images＆＃34;有孩子的宽度，所以＆＃34; category_images＆＃34;可以以＆＃34;保证金为中心：0自动＆＃34;来自＆＃34; category_images_wrapper＆＃34;。
目前＆＃34; category_images＆＃34;具有其父级＆＃34; category_images_wrapper＆＃34;的宽度而且它没有集中。

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/

非常感谢！

2 个答案:

答案 0 :(得分：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>

答案 1 :(得分：0)

无需使用保证金设置，您可以使用flexbox或inline-block设置...

＆＃13;
＆＃13; 
.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;
  }
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题