如何对齐 btn 内容垂直对齐

Question

所有按钮高度应相同，按钮内容应垂直居中

代码笔链接

.col-md-3{
      margin-bottom:20px;
    }
    .btn{
      border:1px solid #000;
      white-space:initial;
      padding:20px;
      height:100%;
    }

 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
 
 <div class="container">
    <div class="row align-items-stretch">
      <div class="col-md-3"><a href="#" class="btn btn-block">Fundamentals of Mathematics </a></div>
                            <div class="col-md-3"><a href="#" class="btn btn-block">Fundamentals of Logical Reasoning - I </a></div>
                            <div class="col-md-3"><a href="#" class="btn btn-block link-circle">Fundamentals of Logical Reasoning - II </a></div>
                            
    </div>
    </div>

Answer 1

Using display：flex; apply this css

.btn
{
  display:flex;
  justify-content:center;
  align-items:center;
}

Answer 2

您需要将以下代码应用于您的btn，请参阅演示

.btn{
    display: flex;
    justify-content: center;
    flex-direction: column;
    text-align: center;
}

Answer 3

使用类 d-flex 为了在一行中对齐内容...您还可以截图说明它是如何的，通常引导按钮的高度相同，并且内容中心...