css - 在 Bootstrap 3 中垂直居中内容

Question

我知道这个问题已经被问过一百次了。但是，我看到的答案不适用于我的情况。这让我相信我的内容中还有一些额外的东西。

<div class="row" style="margin-left:6px; margin-right:6px;" ng-repeat="product in products">
  <div class="col-xs-6 col-sm-6 col-lg-6">
    <a>
      <h4>{{product.name}}</h4>
      <h5>{{product.description}}</h5>
    </a>
  </div>

  <div class="col-xs-6 col-sm-6 col-lg-6">
    <span class="pull-right">
      remove&nbsp;
      <i class="glyphicon glyphicon-remove pull-right"></i>
    </span>
  </div>
</div>

我希望第二列中的 remove [x] 相对于第一列垂直居中。现在，remove [x] 在顶部垂直居中。我想我可以通过执行以下操作使内容垂直居中:

<div class="col-xs-6 col-sm-6 col-lg-6" style="float:none; display:table-cell; vertical-align:center">
    <span class="pull-right">
      remove&nbsp;
      <i class="glyphicon glyphicon-remove pull-right"></i>
    </span>
  </div>

不幸的是，这没有用。我不确定我做错了什么。

Answer 1

首先，我建议您向要使用的列添加一个额外的类。在您的基本示例中，它不会产生任何影响，但一旦您开始添加更多元素，您就会发现通过可重用类管理元素的优势。

因此，第一步，对您的 HTML 进行微小的更改。并不是真的需要，因为您可以轻松地定位(例如) .col-xs-6 ，但这是一种通用方法(正如我们所用的那样，我会向该行添加一个类，然后删除该内联样式)

<div class="row" style="margin-left:6px; margin-right:6px;" ng-repeat="product in products">
  <div class="col-xs-6 col-sm-6 col-lg-6 midvert">
    <a>
      <h4>{{product.name}}</h4>
      <h5>{{product.description}}</h5>
    </a>
  </div>

  <div class="col-xs-6 col-sm-6 col-lg-6 midvert">
    <span class="pull-right remove">
      remove&nbsp;
      <i class="glyphicon glyphicon-remove"></i>
    </span>
  </div>
</div>

现在我们可以安全地以 Bootsrap 元素为目标而不影响相同可重用类在进一步使用中的流程，我们只需给出一个 vertical-align。对他们来说，像这样:

.midvert {
    display:inline-block;
    vertical-align:middle
  }

查看如何将垂直对齐添加到CONTAINING BLOCK ELEMENT，而不是您要对齐的元素本身。但是当然，这根本不会做任何事情，因为我们的 .remove 元素需要某种定义的高度，所以我们添加以下内容:

.remove {
    line-height: 4; 
  }

虽然单个数字的原因有待讨论(您可以使用 px、rem、em、% 等)，而且我看到这里的大多数人都使用 px 方法，但我更喜欢使用单个数字。你可以在这里看到基本原理 Prefer unitless numbers for line-height values ，但同样，请随意使用。您会注意到 4 到 4.5 之间的数字 是最合适的，只需调整窗口大小并自行查看。

我已经 forked a Bootply证明问题