如何修复此警告框中未对齐的关闭 x 符号？

Question

调整行高后，右边的结束x标记更靠近警告消息框的底部。我正在使用 Bootstrap v5.0.1。如何使 x 标记垂直居中？谢谢。

CSS:

.alert {
  margin-bottom: 1px;
  height: 45px;
  line-height: 45px;
  padding: 0px 15px;
  font-size: 15px;
}

HTML:

<div class="alert alert-success alert-dismissible fade show" role="alert">
  Success! Your application was submitted!
  <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>

结果：

Answer 1

您只需更改 de .btn-close 高度即可。我试了一些高度，我觉得可以接受。

.alert {
  margin-bottom: 1px;
  height: 45px;
  line-height: 45px;
  padding: 0px 15px;
  font-size: 15px;
}

.btn-close {
  height: 5px;
}

Answer 2

如果您不想覆盖现有的 bootstrap class，您可以添加自己的，并像这样覆盖填充：

    <style>
        .alert {
          margin-bottom: 1px;
          height: 45px;
          line-height:45px;
          padding:0px 15px;
          font-size: 15px;
        }
        .alert >.extra {
            padding: 0.8rem 1rem;
        }
      </style>

    <div class="alert alert-success alert-dismissible fade show" role="alert">
            The activator phrase was successfully registered!
            <button type="button" class="extra btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
     </div>

Answer 3

在您的 button 上使用 mt-2 作为 margin-top: .5em;。

.alert {
  line-height: 45px;
  font-size: 15px;
}

<head>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</head>

<div class="alert alert-success alert-dismissible fade show" role="alert">
  Success! Your application was submitted!
  <button type="button" class="btn-close mt-2" data-bs-dismiss="alert" aria-label="Close"></button>
</div>

旁注 - 在 Bootstrap 中设置 height、line-height 和 padding 有点多余。您应该使用 Bootstrap Text Utilities 来替换您的 CSS。例如，lh = line-height 和 fs = font-size.

如何修复此警告框中未对齐的关闭 x 符号？

How to fix misaligned closing x symbol in this alert box?

css

twitter-bootstrap

bootstrap-5