Центрирование divs в строке

Question

У меня есть ряд divs с классами, называемыми card. В строке может быть до трех карт. Каждая карта имеет ширину 33%.

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

Answer 1

вы можете использовать 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>

Answer 2

Вы можете рассмотреть возможность использования дисплея: сгибать и обосновывают-контента: центр этой

проверить этот фрагмент

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

Надеется, что это помогает

Answer 3

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