垂直对齐 Bootstrap 4 .Alert 内关闭图标

Question

我在警报中使用 Bootstrap 4 Close icon。

   <div class="alert alert-info p-2">
       <a class="close" data-dismiss="alert" href="#">×</a>The CVC card code is required.
   </div>

https://www.codeply.com/go/4ImkAPOKug

问题是关闭图标没有在锚元素内垂直居中。我想将它向上移动几个像素。在检查 .close CSS 时，我看到 line-height:1 控制锚点的高度，因此调整 line-height 会缩小锚点的高度，但我更愿意将其保留为是为了保持一致性。

除了更改 line-height 之外，是否有办法 将图标垂直放置在锚点 的行框内？我尝试了 display:inline-block、vertical-align:middle、底部边距等...但似乎没有任何效果。我不想在警报中垂直居中。

Answer 1

不是最好的方法，但您可以应用 -0.15rem

的边距顶部

.close {
 margin-top:-0.15rem;
}


/* To illustrate */
.alert {
  position:relative;
}
.alert:after {
 content:"";
 position:absolute;
 top:26px;
 left:0;
 width:100%;
 border-bottom:1px solid red;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="container">
  <div class="row py-3">
    <div class="col-8">
      <div class="alert alert-info p-2">
        <a class="close" data-dismiss="alert" href="#">&times;</a>The CVC card code is required.
      </div>
    </div>
  </div>
</div>
<div class="container">
  <div class="row py-3">
    <div class="col-3">
      <div class="alert alert-info p-2">
        <a class="close" data-dismiss="alert" href="#">&times;</a>The CVC card code is required.
      </div>
    </div>
  </div>
</div>

Answer 2

您可以使用 baseline 在组合中按基线对齐项目：

.alert{
    display: flex;
    align-items: baseline;
}

.alert:after {
   content:"";
   position:absolute;
   top:31px;
   left:0;
   width:100%;
   border-bottom:1px solid red;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="container">
   <div class="row py-3">
      <div class="col-6">
         <div class="alert alert-info p-2">
            <p>The CVC card code is required</p>
            <a class="close" data-dismiss="alert" href="#">
            &times;
            </a>
         </div>
      </div>
      <div class="col-6">
         <div class="alert alert-info p-2">
            <p>The &times; aligns toward the bottom of the anchor's line-box?</p>
            <a class="close align-top d-table-cell align-top" data-dismiss="alert" href="#">
            <span class="border border-danger">&times;</span>
            </a>
         </div>
      </div>
   </div>
</div>

Answer 3

我无法让标准 close 正确对齐到顶部。解决方法是使用 align-text-top small 缩小 close 元素的字体和高度。

<div class="alert alert-info p-2">
        <a class="close" data-dismiss="alert" href="#">
             <span class="align-text-top small">&times;</span>
        </a>
        The CVC card code is required
</div>

https://codeply.com/go/gr21OObdyV

垂直对齐 Bootstrap 4 .Alert 内关闭图标

Vertical align Bootstrap 4 .close icon inside Alert

css

font-size

bootstrap-4