css - 垂直居中对齐 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;
}