html - 警报有多行时 Bootstrap 中心警报关闭按钮

Question

很简单的问题:

这段代码: http://www.bootply.com/DiP1WtXyho

<div class="alert alert-info" role="alert">
  Line 1
  <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
</div>

<div class="alert alert-info" role="alert">
  Line 1
  <br>
  Line 2
  <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
</div>

导致这个问题:

如您所见，在第一个警报中，关闭按钮居中。在第二个警报中它不是。我该如何解决？ (如果可能，不要在我的所有警报中添加完整的表格结构。)

Answer 1

另一种方法是将关闭框设置为 absolute 定位，但不幸的副作用是您必须对顶部 margin 进行硬编码。

.alert-info {
  position: relative;
}

.close {
  float: none;
  position: absolute;
  right: 10px;
  top: 50%;
  margin-top: -10px; /* Needs to be half the height of the element (21/2) */
}

我recreated this in a js.fiddle if you want to see it in action .希望对您有所帮助。

编辑看来 height 需要基于关闭框 (X) 而不是 top-padding。元素高度为 21px，因此 -10px 效果很好。 Updated the Fiddle to showcase this update .