垂直对齐引导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 be的设备上查看，因此当您运行代码段时，请选择“全屏”来查看示例。

下面是一个代码依赖程序，代码与上面的代码相同：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;
}

Answer 2

对于您的例子来说，您没有真正使用引导网格，您可以使用我的示例中的内容，如果您想获得间距，可以将其放在12列行中，但是问题的原因只是button默认值需要显示inline-block，然后您所在的<br/>将在“认证”之后删除一个新行，这是人们所期望的。

干杯

​

.btn {
  display: inline-block;
}

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

<button class="btn btn-default">
  Cancel
</button>

<button class="btn btn-default">
  Certify and Submit (1)
</button>        

  Certification <br/> By Clicking Submit I hereby certify the appropriate procedures and approvals were obtained and the information entered is accurate and true

​