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

Question

这是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%;
 }

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

如果行高：45px，它看起来像

如何垂直对齐元素？

Answer 1

您可以使用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;
}

Answer 2

将<{3>}添加到 Course 1 文本中，将其垂直对齐以形成按钮等元素。在尝试其他任何操作之前，我首先尝试查看是否可以使用以下示例（两列.text-right而不是使用.pull-right浮动按钮）。

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

P.S。 p.form-control-static是使用CSS集中内容的绝佳资源。然而，拥有一个浮动元素可能会成为一个问题。