css - 垂直对齐 Bootstrap 3.3.7 按钮

Question

我不知道如何在以下代码段中垂直对齐按钮旁边的文本。有什么想法吗？

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

<div class="container-fluid">
  <div class="row">
    <div class="col-xs-12">
      <div id="actionButtons">
        <button class="btn btn-default">
          Cancel
        </button>
        <button class="btn btn-default">
          Certify and Submit (1)
        </button>
        <div style="display:inline-block;text-align:center;width:460px">
              Certification <br/> By Clicking Submit I hereby certify the appropriate procedures and approvals were obtained and the information entered is accurate and true
        </div>        
      </div>
    </div>
  </div>
</div>

这将在屏幕宽度至少为 1000 像素的设备上查看，因此当您运行代码片段时，请选择“全屏”以查看示例。

这是一个代码笔，与上面的代码相同: https://codepen.io/upgradingdave/pen/dgzdKL

下面的代码片段更接近我的目标，但我希望在不更改上面的 html 标记的情况下完成此操作:

    <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
    
<div class="container-fluid">
  <div class="row" style="height:100px;border:1px solid black;">
    <div class="col-xs-1">
      <button class="btn btn-default" style="margin-top: 30px;">
        Cancel
      </button>
    </div>
    <div class="col-xs-2">
      <button class="btn btn-default" style="margin-top: 30px;">
        Certify and Submit (1)
      </button>
    </div>
    <div class="col-xs-3">
      <div style="text-align:center">
        Certification <br/> By Clicking Submit I hereby certify the appropriate procedures and approvals were obtained and the information entered is accurate and true
     </div>
  </div>
</div>

Answer 1

试试这个

#actionButtons{
  display:flex;
  align-items:center;
  -webkit-align-items:center;
  -moz-align-items:center;
}