Bootstrap ссылка не центрируется по вертикали, но кнопка - PullRequest
Новая
       25

Bootstrap ссылка не центрируется по вертикали, но кнопка

0 голосов
/ 26 мая 2020

Я хочу иметь <a></a>, в котором текст центрируется вертикально, как кнопки. Может кто-нибудь объяснить, почему <button></button> по центру вертикально, а не ссылка?

Высота строки не работает (см. Ниже) 

.btn {
  height: 70px;
}

.line-height-example {
   line-height: 30px;
   min-height: 45px;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>

<a href="#" class="btn btn-primary">Not centered</a>
<button class="btn btn-primary">Centered</button>
<br><br>

<div class="row">
  <div class="col-3">
    <a href="#" class="btn btn-primary line-height-example">Line height</a>
  </div>
  <div class="col-3">
    <a href="#" class="btn btn-primary line-height-example">Line height example</a>
  </div>
</div>

1 Ответ

1 голос
/ 26 мая 2020 

.btn {
  height: 70px;
}

.line-height-example {
   line-height: 30px;
   min-height: 45px;
}
a {
 display:inline-flex !important;
 align-items:center !important;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>

<a href="#" class="btn btn-primary">Not centered</a>
<button class="btn btn-primary">Centered</button>
<br><br>

<div class="row">
  <div class="col-3">
    <a href="#" class="btn btn-primary line-height-example">Line height</a>
  </div>
  <div class="col-3">
    <a href="#" class="btn btn-primary line-height-example">Line height example</a>
  </div>
</div>
...