centering a text in a div with inline-block-CodePudding

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 >
  <div >
    <div >Stuff<br />1200$</div>
  </div>
  <div >
    <div >Some Stuff<br />500$</div>
  </div>
</div>

CodePudding user response：

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 >
  <div >
    <div >Stuff<br />1200$</div>
  </div>
  <div >
    <div >Some Stuff<br />500$</div>
  </div>
</div>

CodePudding user response：

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 >
  <div >
    <div >Stuff<br />1200$</div>
  </div>
  
  <div >
    <div >Some Stuff<br />500$</div>
  </div>
</div>

CodePudding user response：

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 >
  <div >
    <div >Stuff<br />1200$</div>
  </div>
  <div >
    <div >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.