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

2023-09-11 07:57:05 作者:最终我成了她的被挡访客i

我要对齐按钮(锚按钮风格,但按键同样的情况),垂直居中,但似乎有一点偏移。

I want to align button (anchor with button style, but the same happens with buttons) vertically centered, but there seems to be a little offset.

这是HTML code我用:

This is the html code I use:

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

这是它的外观中的jsfiddle: http://jsfiddle.net/TeAvH/

This is how it looks in jsfiddle: http://jsfiddle.net/TeAvH/

推荐答案

看来,出现这种情况是因为按钮类有显示:inline-block的属性。更改为显示:内联应该可以解决这个问题。

It appears that this happens because the button class has display:inline-block property. Changing this to display:inline should fix the issue.

.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;
}