Question

我只想将同一行中div旁边的buttons旁边的div内的文字完全垂直居中。

我的文字有text-left课程，我的按钮有text-right。

我整个下午都在搜索，也许我需要再看一眼......

<div class="row">
  <div class="col-xs-8 col-xs-offset-2 text-left" style="padding: 10px; border: 1px solid gray; margin-top: 10px;">
    <div class="col-xs-4">
      A simple text here.
    </div>
    <div class="col-xs-8 text-right">
      <button name="spy" class="btn btn-info">Espionner</button>
      <button name="attack" class="btn btn-danger">Attaquer</button>
    </div>
  </div>
</div>

这是我的JSFiddle

我应该使用其他东西而不仅仅是Twitter Bootstrap的类吗？

谢谢：）

Answer 1

<div class="row">
  <div class="col-xs-10 col-xs-offset-2 text-left" style="padding: 10px; border: 1px solid gray; margin-top: 10px;">
   <form  class="form-inline">
    <div class="row">
        <label class="span1" >A simple text here.</label>
         <button name="spy" class="btn btn-info">Espionner</button>
      <button name="attack" class="btn btn-danger">Attaquer</button>
    </div>
    </form>
  </div>
</div>

如果你想垂直对齐所有三个组件，那么你应该使用from-inline类和Html看起来像这样。

Answer 2

检查你是否想要这样的东西 -

JS FIDDLE

public static int height(Node n) {
    if (n == null) {
        return 0;
    }
    return 1 + Math.max(height(n.getLeft()), height(n.getRight()));
}

.col-xs-6  h5 {
  vertical-align: middle;
  display: inline-block;
}

如何简单地将带有文本的div垂直居中在另一个div旁边，并带有Twitter Bootstrap 3的按钮

2 个答案: