Question

使用Bootstrap 3，我试图水平对齐两个按钮（分别左右对齐）和以它们为中心的glyphicon。现在我只能在为glyphicon使用

元素时对齐它们，这会导致所有三个元素出现在不同的行上。如何保持所有三个水平排列，同时保持左，中，右位置？

我已经看到similar questions被问到，并且一直试图在CSS中实现text: nowrap;但没有成功。

<div class="col-xs-10 col-xs-offset-1">
  <button type="button" class="btn btn-primary btn-lg" id="por-btn">por</button>

  <p class="text-center"><span class="glyphicon glyphicon-ok-sign"></span></p> 

  <button type="button" class="btn btn-primary pull-right btn-lg" id="para-btn">para</button>
</div>

Answer 1

Flexbox解决方案很棒但是这样你也可以在水平方面对齐项目

＆＃13;

.valign{
line-height:46px;
vertical-align:middle;}

＆＃13;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
 
<div class="col-xs-10 col-xs-offset-1">
<div class="row">
<div class="col-xs-4">
  <button type="button" class="btn btn-primary btn-lg" id="por-btn">por</button>
</div>
<div class="col-xs-4 text-center valign">
  <span class="glyphicon glyphicon-ok-sign"></span> 
</div>
<div class="col-xs-4">
  <button type="button" class="btn btn-primary pull-right btn-lg" id="para-btn">para</button>
  </div>
  </div>
</div>

＆＃13;

Answer 2

Flexbox在这里可以提供很大的帮助：

.horizontalAlign{
  width:100%;
  display:flex;
  justify-content:space-between;
  align-items:center;
}

<div class="col-xs-10 col-xs-offset-1 horizontalAlign">
  <button type="button" class="btn btn-primary btn-lg" id="por-btn">tall<br>button<br>is<br>here</button>

  <p class="text-center">icon is here</span></p> 

  <button type="button" class="btn btn-primary pull-right btn-lg" id="para-btn">everything is centered</button>
</div>

P.S。：段落标记可以是任何内容（例如所需的fa-icon），我想显示定位。

Bootstrap 3：对齐图标和文本时没有换行符

2 个答案: