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
  }

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

.remove {
    line-height: 4; 
  }

虽然单个数字的原因可以讨论（你可以使用px，rem，em，％等），我看到大多数人都使用px方法，我更喜欢使用单个数字。您可以在此处查看Prefer unitless numbers for line-height values的基本原理，但请再次使用。您会注意到 4到4.5之间的数字是最合适的，只需调整窗口大小并自行查看即可。

我forked a Bootply来证明问题

Answer 2

您可以通过向您的＆＃34;删除＆＃34;添加line-height来实现此目的。链接。

例如，如果您将此类添加到您的链接：

  .remove {
    line-height: 40px; 
    vertical-align: middle;
  }

它会对齐。

Bootply demo

Answer 3

我为你创建了Fiddle，希望这对你有用。

请注意我已为其他display:table-cell; css课程添加col-sm-6的css标签。

在Bootstrap中垂直居中内容3

3 个答案:

Bootply demo