警报有多行时，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

Answer 2

要对齐Copy.names = rule.names.map(function(x) { if (x.name ==='Everything') { return ''; } else { return x.name; } }); 按钮verticaly center，请在css下方添加close。

注意

仅提供vertically aligned centered会使其成为中心，但会影响那些包含单行文字的line-height:0。的由于

alerts

多数民众赞成