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>

这将在屏幕宽度至少为1000px的设备上查看，因此在运行摘要时，请选择“全屏”以查看示例。

这是一个与上面的代码相同的代码笔： 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

对于您的实例，您并没有真正使用引导网格，可以使用示例中的内容，如果您希望获得间距，可以将其放在12列的行中，但是造成问题的原因只是{ {1}}默认情况下需要显示button，然后您所处的inline-block会在“证书”之后按新的一行显示。

欢呼

<br/>

.btn {
  display: inline-block;
}

Answer 2

尝试

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

垂直对齐Bootstrap 3.3.7按钮

2 个答案: