centering a text in a div with inline-block

Question

I have basic card design. But I need this cards in a row. So I use inline-block. But at that time, "align-items: center" is not working. I check the old questions, they said use display: table. But table is disrupts inline-block.

What should I do to work centering?

.card-daily {
  text-align: center;
  margin-bottom: 5%;
}

.card-daily-item {
  display: inline-block;
  text-align: center;
  align-items: center;
  background-color: #e3ffee;
  border-radius: 25px;
  width: 19em;
  height: 7em;
}

<div class="card-daily">
  <div class="card-daily-item">
    <div class="card-body-daily">Stuff<br />1200$</div>
  </div>
  <div class="card-daily-item">
    <div class="card-body-daily">Some Stuff<br />500$</div>
  </div>
</div>

This is a very common scenario, check answers here : https://stackoverflow.com/questions/5703552/how-can-i-center-text-horizontally-and-vertically-inside-a-div-block — Anurag Srivastava, Mar 06 '22 at 15:06

score 1 · Accepted Answer · answered Mar 06 '22 at 15:22

You can do it with flex box.

.card-daily {  
  display: flex;
  justify-content: center;  
  gap: 10px;  
}

.card-daily-item {   
  display: flex;
  justify-content: center;  
  align-items: center;
  text-align: center;
  background-color: #e3ffee;
  border-radius: 25px;
  width: 19em;
  height: 7em;  
}

<div class="card-daily">
  <div class="card-daily-item">
    <div class="card-body-daily">Stuff<br />1200$</div>
  </div>
  
  <div class="card-daily-item">
    <div class="card-body-daily">Some Stuff<br />500$</div>
  </div>
</div>

score 1 · Answer 2 · answered Mar 06 '22 at 15:23

You can check my changes here

display: flex; in .card-daily is for row display

display: flex; in .card-daily-item is for text centralization setup

margin: auto; in .card-body-daily is for text centralization (from both sides of top and left)

.card-daily {
   text-align: center;
  margin-bottom: 5%;
  display: flex;
}

.card-daily-item {
  display: flex;
  background-color: #e3ffee;
  border-radius: 25px;
  width: 19em;
  height: 7em;
}

.card-body-daily {
  margin: auto;
}

    

<div class="card-daily">
  <div class="card-daily-item">
    <div class="card-body-daily">Stuff<br />1200$</div>
  </div>
  <div class="card-daily-item">
    <div class="card-body-daily">Some Stuff<br />500$</div>
  </div>
</div>

If you want to have better understanding, you can look into this article

https://www.digitalocean.com/community/tutorials/css-centering-using-flexbox

Hopefully, my answer is useful for you.

score 0 · Answer 3 · answered Mar 06 '22 at 15:19

First of all, I recommend you to read about display {flex} as it should help you a lot and this property will save a lot of your time. Secondly, Try this snippet of code and it should work fine:

.card-daily {
  text-align: center;
  margin-bottom: 5%;
  display: flex;
  justify-content: center;
}

.card-daily-item {
  text-align: center;
  background-color: #e3ffee;
  border-radius: 25px;
  width: 19em;
  height: 7em;

}

<div class="card-daily">
  <div class="card-daily-item">
    <div class="card-body-daily">Stuff<br />1200$</div>
  </div>
  <div class="card-daily-item">
    <div class="card-body-daily">Some Stuff<br />500$</div>
  </div>
</div>

`text-align: center` is overredundant inside a flexbox as `justify-content` already centers horizontally. You miss `align-items` to center vertically instead of text-align. — tacoshy, Mar 06 '22 at 15:58

centering a text in a div with inline-block

3 Answers3