CODEWITHSUNDEEP
htmlcssangularbootstrap-4
Idorasi Paul
Idorasi Paul

Reputation: 77

Two buttons in a div are misaligned

The second button in a div is always lower than the first one across the entire project. The two buttons are have the same height: 30px.

Two misaligned buttons

If I have three buttons, the second and third one are aligned but are slightly lower than the first one.

This is just a table with one actions column that includes two buttons, but my problem is in the entire project.

button {
  margin: 2px;
  font-size: 12px !important;
}

.btn-primary {
  background-color: darkslategrey !important;
  border: none;
}

.btn-secondary {
  background-color: darkblue !important;
  border: none;
}
 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">


<tbody>
  <tr *ngFor="let financialPlatform of financialInstitutionsPage.content | paginate: financialInstitutionsPage">
    <td>{{financialPlatform.name}}</td>
    <td>{{financialPlatform.code}}</td>
    <td>{{financialPlatform.country}}</td>
    <td>{{financialPlatform.aisStatus | apiStatus | translate}}</td>
    <td>{{financialPlatform.pisStatus | apiStatus | translate}}</td>
    <td>{{financialPlatform.provider}}</td>
    <td>
      <div>
        <button class="btn btn-secondary action btn-sm" (click)=navigateToDetails(financialPlatform.publicIdentifier)>
              {{ 'general.button.details' | translate }}
            </button>
        <button class="btn btn-secondary action btn-sm" (click)="navigateToPlatforms(financialPlatform.publicIdentifier)">
              {{'financial.institutions.overview.button.platforms' | translate}}
            </button>
      </div>
    </td>
  </tr>
</tbody>

Upvotes: 3

Views: 446

Answers (1)

Tanner Dolby
Tanner Dolby

Reputation: 4421

To ensure the child <button> elements nested in the parent <div> are aligned vertically, you can make the parent container a flexbox and use align-items: center so the flex items are centered along the cross axis.

.parent {
  display: flex;
  align-items: center;
}

.parent button {
  margin: 2px;
  font-size: 12px !important;
}

.btn-primary {
  background-color: darkslategrey !important;
  border: none;
}

.btn-secondary {
  background-color: darkblue !important;
  border: none;
}
<head>
 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<tbody>
  <tr *ngFor="let financialPlatform of financialInstitutionsPage.content | paginate: financialInstitutionsPage">
    <td>
      <div class="parent">
        <button class="btn btn-secondary action btn-sm" (click)=navigateToDetails(financialPlatform.publicIdentifier)>Details</button>
        <button class="btn btn-secondary action btn-sm" (click)="navigateToPlatforms(financialPlatform.publicIdentifier)">Platforms</button>
      </div>
    </td>
  </tr>
</tbody>

Upvotes: 3

Related Questions