Css 在警报字段中垂直对齐按钮

我想对齐垂直居中的按钮（锚定按钮样式，但同样的情况发生在按钮上），但似乎有一点偏移

这是我使用的html代码：

<div class="alert alert-info">
    Text on the left
    <p class="pull-right">
        <a class="btn btn-default" href="#">Link</a>
    </p>
</div>

左边的文字

这是它在JSFIDLE中的外观：

---

当您使用

向右拉

时，引导程序正在应用

浮动：向右

。这将从文档流中删除元素，这意味着它将不再影响其父容器的高度。这是你需要解决的第一件事。有几种不同的方法，但我最喜欢的是对父元素应用

overflow:auto

现在这个问题已经解决了，您仍然需要处理这样一个事实，即文本的行高度与按钮的高度不同。要解决此问题，只需指定线条高度。在这种情况下，按钮的高度为

36px

，因此您可以使用

行高：36px

以下是一些工作代码（以下是更新的代码）：

HTML

<div class="alert alert-info">
Text on the left
<a class="btn btn-default pull-right" href="#">Link</a>
</div>

---

当您使用

pull right

时，引导将应用

float:right

。这将从文档流中删除元素，这意味着它将不再影响其父容器的高度。这是你需要解决的第一件事。有几种不同的方法，但我最喜欢的是对父元素应用

overflow:auto

现在这个问题已经解决了，您仍然需要处理这样一个事实，即文本的行高度与按钮的高度不同。要解决此问题，只需指定线条高度。在这种情况下，按钮的高度为

36px

，因此您可以使用

行高：36px

以下是一些工作代码（以下是更新的代码）：

HTML

<div class="alert alert-info">
Text on the left
<a class="btn btn-default pull-right" href="#">Link</a>
</div>

---

首先，请注意一些HTML元素确实有默认的边距和/或填充。更多关于这个

---

为了更好地控制这种情况下发生的事情，您可以将文本和其他元素放在一个分别向左和向右浮动的

中。

首先，请注意，某些HTML元素确实有默认的边距和/或填充。更多关于这个

---

为了更好地控制这种情况下发生的事情，您可以将文本和其他元素放在一个分别向左和向右浮动的

中。

出现这种情况似乎是因为button类具有

display:inline block

属性。将此更改为

display:inline

可以解决此问题

.alert p .btn {
    display:inline;
}

以下是默认的

.btn

类属性：

.btn {
  display: inline-block;
  padding: 6px 12px;
  margin-bottom: 0;
  font-size: 14px;
  font-weight: bold;
  line-height: 1.428571429;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  cursor: pointer;
  border: 1px solid transparent;
  border-radius: 4px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
}

---

这似乎是因为button类具有

display:inline block

属性。将此更改为

display:inline

可以解决此问题

.alert p .btn {
    display:inline;
}

以下是默认的

.btn

类属性：

.btn {
  display: inline-block;
  padding: 6px 12px;
  margin-bottom: 0;
  font-size: 14px;
  font-weight: bold;
  line-height: 1.428571429;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  cursor: pointer;
  border: 1px solid transparent;
  border-radius: 4px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
}