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

使用display：flex;应用此CSS

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

Answer 2

您需要将以下代码应用于btn，请参见demo

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

Answer 3

使用d-flex类以使内容连续对齐... 您还可以给出屏幕截图，通常情况下，引导程序按钮的高度相同，并且资源中心...

如何对齐btn内容垂直对齐

3 个答案: