dshm8998473 2017-04-27 08:27
浏览 41
已采纳

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

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!

  • 写回答

2条回答 默认 最新

  • duan0714 2017-04-27 08:45
    关注

    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>
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题?

悬赏问题

  • ¥15 C#调用python代码(python带有库)
  • ¥15 矩阵加法的规则是两个矩阵中对应位置的数的绝对值进行加和
  • ¥15 活动选择题。最多可以参加几个项目?
  • ¥15 飞机曲面部件如机翼,壁板等具体的孔位模型
  • ¥15 vs2019中数据导出问题
  • ¥20 云服务Linux系统TCP-MSS值修改?
  • ¥20 关于#单片机#的问题:项目:使用模拟iic与ov2640通讯环境:F407问题:读取的ID号总是0xff,自己调了调发现在读从机数据时,SDA线上并未有信号变化(语言-c语言)
  • ¥20 怎么在stm32门禁成品上增加查询记录功能
  • ¥15 Source insight编写代码后使用CCS5.2版本import之后,代码跳到注释行里面
  • ¥50 NT4.0系统 STOP:0X0000007B