代码之家 › 专栏 › 技术社区 › Upgradingdave

垂直对齐引导3.3.7按钮

twitter-bootstrap css

Upgradingdave · 技术社区 · 6 年前

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

<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>

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

2 回复 | 直到 6 年前

Anand 6 年前

试试这个

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

Chris W. 6 年前

对于你的例子,你没有真正使用引导网格,你可以拿我的例子,把它放在一个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

推荐文章

YunusoviÄ · 我无法用css更改html段落颜色

1 年前

Blake · 无法使用CSS旋转Angular 15中的字体图标

1 年前

Maarten -Monica for president · 将图像放在锚点标记内时调整网格中的图像大小

1 年前

Phil Lucks · 如何制作边界的外半径?

1 年前

roy_meir · 创建自定义下拉式元素

1 年前

Community wiki · 如何为触摸设备优化网站

1 年前

Paras Chandravanshi · 为什么<ul>没有从其父<p>元素继承?

1 年前

tpetzoldt · 如何在有光泽的情况下抑制图像的抗锯齿?

1 年前

boyenec · 反应如何将css样式应用于我从api respose获得的页面的spcifc部分

1 年前

manofconstsorrow · 点击导航项目关闭汉堡菜单

1 年前