居中divs连续

我有一排名为卡类的div。一排中最多可以有三张牌。每张卡的宽度为33％。居中divs连续

的HTML看起来像......

<div class="row"> 
    <div class="card">card</div> 
    <div class="card">card 2</div> 
    <div class="card">card 3</div> 
</div> 

<br> 
<br> 

<div class="row"> 
    <div class="card">card</div> 
    <div class="card">card 2</div> 
</div>

的CSS看起来像......

.row { 
    padding: 20px; 
} 

.card { 
    width: 33%; 
    float: left; 
    border: solid 1px black; 
    position: relative; 
}

我还创建了一个codepen here。

我想要的是如果连续少于3张卡片，则将这些卡片居中。我该怎么做？

通常有3张连续会是什么样子......

------------------------------------------------------------------------------------------- 
|        |        |       | 
|        |        |       | 
|        |        |       | 
|        |        |       | 
|  card     |   card    |  card    | 
|        |        |       | 
|        |        |       | 
|        |        |       | 
|        |        |       | 
|        |        |       | 
-------------------------------------------------------------------------------------------

当我们有2张卡在一排它看起来像......

-------------------------------------------------------- 
|      |        | 
|      |        | 
|      |        | 
|      |        | 
|      |        | 
|   card   |   card    | 
|      |        | 
|      |        | 
|      |        | 
|      |        | 
--------------------------------------------------------

我们希望2卡像这样居中......

    ----------------------------------------------------- 
        |      |       | 
        |      |       | 
        |      |       | 
        |      |       | 
        |      |       | 
        |   card   |   card   | 
        |      |       | 
        |      |       | 
        |      |       | 
        |      |       | 
        -----------------------------------------------------

来源

2016-12-06 jason328

可以使用CSS3 flexbox概念概念对于这一点，你的父母标签（.row）的显示属性设置为柔性。而再使用证明内容属性和设置它的值中心。

.row { 
 
    padding: 20px; 
 
    display: flex; 
 
    justify-content :center; 
 
} 
 

 
.card { 
 
    width: 33%; 
 
    height:100px; 
 
    /*float: left;*/ 
 
    border: solid 1px black; 
 
    /*position: relative;*/ 
 
}

<div class="row"> 
 
    <div class="card">card</div> 
 
    <div class="card">card 2</div> 
 
    <div class="card">card 3</div> 
 
</div> 
 

 
<br> 
 
<br> 
 

 
<div class="row"> 
 
    <div class="card">card</div> 
 
    <div class="card">card 2</div> 
 
</div>

来源

2016-12-06 18:14:13

嗯，这个作品真的很好。唯一的问题是，这个解决方案对我来说不是移动友好的。在较小的宽度中，当实际上我想让它们堆叠在一起时，这些盒子重叠。 – jason328

你可以考虑使用display：flex和justify-content：center for this

检查这个片段

.row { 
 
    display: flex; 
 
    justify-content: center; 
 
} 
 
.card { 
 
    width: 20%; 
 
    height: 50px; 
 
    border: 1px dashed; 
 
}

<div class="row"> 
 
    <div class="card">card</div> 
 
    <div class="card">card 2</div> 
 
    <div class="card">card 3</div> 
 
</div> 
 

 
<br> 
 
<br> 
 

 
<div class="row"> 
 
    <div class="card">card</div> 
 
    <div class="card">card 2</div> 
 
</div>

希望它可以帮助

来源

2016-12-06 18:12:31 Geeky

我会推荐给Flexbox的一个镜头，太。这是一个伟大的技能！ – MrGood

使用inline-block，而不是浮动和text-align: center;

.row { 
    padding: 20px; 
    text-align: center; 
} 

.card { 
    width: 33%; 
    display: inline-block; 
    border: solid 1px black; 
}

http://codepen.io/anon/pen/PbeZgd

来源

2016-12-06 18:12:41 Johannes

回答

相关问题