【问题标题】:Center button vertically in bootstrap row在引导行中垂直居中按钮
【发布时间】:2015-12-09 17:28:52
【问题描述】:

我有以下 html。我正在使用 Bootstrap 3 框架。我正在尝试将我的按钮与行中的 h2 标题垂直对齐。问题是按钮与列 div 的顶部对齐,而不是像标题那样位于中间。此外,当屏幕调整为更小时,按钮将与底部对齐。我有一个 jsfiddle 的链接。

http://jsfiddle.net/n74/c9dhn9nc/17/

<div class ="row">  
      <div class="col-sm-9">
      <h2>Dashboard</h2>
      </div>
      <div class="col-sm-3" >
           <button  class="btn btn-success btn-lg pull-right">Create App</button>
      </div>
  </div>"

【问题讨论】:

    标签: javascript html css twitter-bootstrap


    【解决方案1】:

    只需在按钮上添加一个边距,使按钮居中到 h2 标签。

    http://jsfiddle.net/c9dhn9nc/19/

    .tmargin {
      margin-top: 12px;
    }
    

    【讨论】:

    • 谢谢,有没有办法简单地将两个元素垂直居中,即vertical-align:center;按钮似乎不起作用
    • Bootstrap 有点不同,我通常使用 javascript 在 bootsrap 中垂直居中,因为你从来没有真正给容器指定高度。我通常做的是有一个脚本来获取父级的高度和它基于高度的中心。
    • 但是,如果你找到一个引导 gu-ru,他们可能有比我的更好的解决方案,这就是我的做法。
    • 一个问题是,当我将屏幕大小调整为较小的显示时,这会中断,因为按钮现在会移到底部
    • 您希望列中断吗?
    猜你喜欢
    • 2016-03-04
    • 2014-04-10
    • 1970-01-01
    • 2017-04-16
    • 2021-10-06
    • 2016-01-27
    • 2020-09-13
    • 1970-01-01
    • 2017-02-05
    相关资源
    最近更新 更多