引导对齐内容

Question

我有一段简单的代码，我正在尝试垂直对齐。

JS 小提琴：https://jsfiddle.net/3kj44net/

.container-fluid {
  padding-left: 20px;
  padding-right: 20px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<header class="header-tool-title">
   <div class="container-fluid">
      <div class="row">
         <div class="col-md-5 vcenter">
            <h1 class="toolTitle"><span name="el_toolName">Tool Name</span> <small class="toolSubTitle">#<span name="el_toolID">244</span></small></h1>
         </div>
         <div class="col-md-7 vcenter">
            <span class="pull-right toolStatus">
               <span class="pull-right">
                  <h4 class="text-right"><span name="el_toolStatus"><a data-content-type="manageDeprecation" name="route">Scheduled for Deprecation</a></span></h4>
               </span>
            </span>
         </div>
      </div>
   </div>
</header>

在下图中，我希望右侧的文本与左侧的文本处于同一水平。

我尝试在内容中添加verticle-align 属性，但它仍然不会移动。

想法？

Answer 1

您可以使用 flex 使两列的大小相同，并且

margin-top:auto;

在要推到底部的元素上。

这是一个小提琴：

https://jsfiddle.net/3kj44net/6/