CODEWITHSUNDEEP
htmlcsssass
thank_you
thank_you

Reputation: 11107

Centering divs in a row

I have a row of divs with classes called card. There can be up to three cards within a row. Each card has a width of 33%.

The html looks like...

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

The CSS looks like...

.row {
  padding: 20px; 
}

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

I've also created a codepen here.

What I want is to center these cards if there are less than 3 cards in a row. How do I do this?

Normally 3 cards in a row would look like...

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

When we have 2 cards in a row it looks like...

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

We want the 2 cards to be centered like so...

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

Upvotes: 1

Views: 75

Answers (3)

Johannes
Johannes

Reputation: 67774

Use inline-block instead of float and 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

Upvotes: 3

ADH - THE TECHIE GUY
ADH - THE TECHIE GUY

Reputation: 4373

you can use css3 flexbox concept concept for this,set the display property of your parent tag(.row) to flex.and then use justify-content property and set it's value to center.

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

Upvotes: 1

Geeky
Geeky

Reputation: 7496

You can consider using display:flex and justify-content:center for this

check this snippet

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

Hope it helps

Upvotes: 0

Related Questions