垂直对齐 col-* bootstrap 3 的内容答案

【问题标题】：Vertically align middle the content of a col-* bootstrap 3垂直对齐 col-* bootstrap 3 的内容
【发布时间】：2015-03-24 00:00:03
【问题描述】：

这是 html -

<div class="col-lg-12 vertical-align">
      Course 1 
      <span class="pull-right btn btn-success">read more</span>
</div>

CSS：

 .vertical-align 
 {
    /*line-height: 45px;*/
    display: block;
    vertical-align: middle;
    width:100%;
 }

如果没有指定行高，它看起来像 -

如果 line-height: 45px，它看起来像

如何垂直对齐两个元素？

【问题讨论】：

标签： css twitter-bootstrap-3 vertical-alignment

【解决方案1】：

将p.form-control-static 添加到Course 1 文本可将其垂直对齐到按钮等表单元素。在尝试其他任何操作之前，我首先会尝试看看您是否可以使用以下示例（两列，.text-right 而不是使用.pull-right 浮动按钮）。

<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" />

<div class="container">
  <div class="row">
    <div class="col-xs-6">
      <p class="form-control-static">Course 1</p>
    </div>
    <div class="col-xs-6 text-right">
      <button type="submit" class="btn btn-success">read more</button>
    </div>
  </div>
</div>

P.S. http://css-tricks.com/centering-css-complete-guide/ 是使用 CSS 使内容居中的绝佳资源。然而，有一个浮动元素可能会成为一个问题。

【讨论】：

【解决方案2】：

您可以使用btn 类。

HTML

<div class="col-lg-12 vertical-align">
      <span class="btn btn-nope">Course 1</span>
      <span class="pull-right btn btn-success">read more</span>
</div>

CSS

.btn-nope {
    padding-left: 0;
    padding-right: 0;
    cursor: default;
}

【讨论】：