居中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

回答

相關問題