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

的上限

＆＃13;

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

＆＃13;

<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>

＆＃13;

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://www.codeply.com/go/gr21OObdyV

警报内的垂直对齐Bootstrap 4 .close图标

3 个答案: