html - 如何对齐按钮内容垂直对齐

标签 html css bootstrap-4

<分区>

所有按钮高度应该相同并且按钮内容应该垂直居中

codepen link

.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>

最佳答案

使用显示: flex ;应用此 CSS

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

关于html - 如何对齐按钮内容垂直对齐,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54360418/

上一篇:css - 如何使用变换: translateY on a child while automatically resizing the parent?

下一篇:html - 相对于其父级定位一个 div

相关文章:

html - css中的感叹号是倒置的

html - Bootstrap 嵌入响应式格式不适合横向移动浏览器

html - css 优先级和 Bootstrap 问题,背景颜色

html - 卡住 HTML 表格列的宽度

javascript - 为什么自关闭脚本不适用于 ExtJS?

html - 响应式表格行,带内联 block 的跨浏览器支持

javascript - 如何使底部工具提示与其元素的右端对齐?

html - 渐变 H1 - 使我的 H1 字体文本具有两种不同颜色的渐变

css - 在Chrome控制台中为xpath选择的节点数

javascript - css 和 jquery 缺少元素背景颜色