CODEWITHSUNDEEP
htmlcss
kosnkov
kosnkov

Reputation: 5941

Need text at the same height in all the divs

I am using angular and bootstrap4, I have few rows inside the divs How do I keep line1 text always at the same height so that if any div has a line0 then all the line1 text in all divs will go down and remain always in the same line? enter image description here

<div *ngFor="let account of clientAccounts" >

          <h6 class="card-title customCardTitle">{{ account.number }}</h6>

          <h1 class="card-subtitle"> {{ account.cash }} </h1>

       </div>

so if account.number has more then 0 lines then account.cash is not aligned horizontally , this is what I am missing.

.customCardTitle has white-space: pre-line

at the end I need to prevent this, and keep cash information in the same line enter image description here

Upvotes: 3

Views: 653

Answers (2)

Ahed Kabalan
Ahed Kabalan

Reputation: 855

.wrap{
  display: flex;
  justify-content: center;
  align-items: stretch;
}
.card{
    display: flex;
    justify-content: center;
    flex-direction: column;
    width: 400px;
    background: gray;
    margin: 10px;
    padding: 20px;
    color: #FFF;
}
.card-title{
    flex: 1;
}
<div class="wrap">

    <div class="card">

      <h6 class="card-title customCardTitle">AT0080456789 (Aco)</h6>

      <h1 class="card-subtitle">$ 1,557</h1>

   </div>

   <div class="card">

      <h6 class="card-title customCardTitle">AT0080456789 (Aco) Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua.</h6>

      <h1 class="card-subtitle">$ 2,357</h1>

   </div>

   <div class="card">

      <h6 class="card-title customCardTitle">AT0080456789 (Aco) Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  tempor incididunt ut labore et dolore magna aliquaLorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  tempor incididunt ut labore et dolore magna aliquaLorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  tempor incididunt ut labore et dolore magna aliqua</h6>

      <h1 class="card-subtitle">$ 557,256</h1>

   </div>

</div>

Upvotes: 1

Awais
Awais

Reputation: 4902

Bootstrap row will contain flex property. With that only we can able to use flex properties for child divs

align-items-center will center the content inside cols

<div class="container">
  <div class="row align-items-center">
    <div class="col-3"><span>test</span></div>
    <div class="col-3"><span>test</span></div>
  </div>
</div>

Now code will center the text vertically, But within the container height. It won't be center to your html page.

To make Your text to center of your page, make row div to full height 100vh

Upvotes: 3

Related Questions