如何将一条垂直线放在一个字体真棒图标下的bootstrap列的中心

Question

我有一个使用bootstrap的列，我有一个字体真棒图标。每个div的高度可以略有不同，所以我需要线调整到div的高度。我已经遇到过许多例子，将线放在div的中心，但我能找到的只是导致线穿过图标的线。我想让这条线在图标下面开始。

我会给你一个示例CSS，但我真的没有任何东西可以告诉你。我甚至不知道从哪里开始。

<div class="col-sm-1">
  <i class="fa fa-refresh" aria-hidden="true" style="color: #5fb760"></i>
</div>
<div class="col-sm-1">
  <i class="fa fa-refresh" aria-hidden="true" style="color: #5fb760"></i>
</div>
<div class="col-sm-1">
  <i class="fa fa-refresh" aria-hidden="true" style="color: #5fb760"></i>
</div>
<div class="col-sm-1">
  <i class="fa fa-refresh" aria-hidden="true" style="color: #5fb760"></i>
</div>
<div class="col-sm-1">
  <i class="fa fa-map-marker" aria-hidden="true" style="color: #5fb760"></i>
</div>

示例：

Answer 1

您也可以将i元素包装起来，然后使用css伪元素打印出您的行。

    <span class="vertical-line-icon" >
      <i class="fa fa-refresh" aria-hidden="true" style="color: #5fb760"></i>
    </span>

然后是CSS：

.vertical-line-icon {
  display: table;
  height: 100%;
}
.vertical-line-icon:after {
  content: '';
  display: table;
  margin: 0 auto;
  width: 4px;
  height: 100%;
  background-color: #555555;
  margin-top:5px;
}

请参阅小提琴：https://jsfiddle.net/rn9g21fj/

Answer 2

可能会尝试一下这行吗？将eaahc部分与bootstrap的行划分？

<div class="row">
<div class="col-sm-1" style="text-align: center !important;">
<i class="fa fa-refresh" aria-hidden="true" style="color: #5fb760">  </i><br>
<img src="straight-line.jpg" />
</div> 
</div>


<div class="row">
<div class="col-sm-1" style="text-align: center !important;">
<i class="fa fa-refresh" aria-hidden="true" style="color: #5fb760">  </i><br>
<img src="straight-line.jpg" />
</div> 
</div>

Answer 3

您可以使用css的伪元素::after来执行此操作。只需在i代码后面进行阻止，然后使用position:absolute;

将其对齐

＆＃13;

＆＃13;

i {position: relative;}
i::before {font-size: 30px;}
i::after {content: ""; display: block; position: absolute; left: 50%; top: 120%; transform: translateX(-50%); width: 6px; background: #556e79; height: 180px;}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<i class="fa fa-refresh" aria-hidden="true" style="color: #5fb760"></i>

＆＃13;

＆＃13;

＆＃13;

Answer 4

您需要使用CSS来使线垂直并调整图标。我使用class="row"分隔线

我试了一下并创建了一个codepen以及CodePen Vertical Line

vr { 
    
    width:10px;
    background-color:#000;
    position:absolute;
    top:25px;
    bottom:0;
    left:15px;
    height:100px;
    
}

<div class="row">
<div class="col-sm-1">
    <i class="fa fa-refresh" aria-hidden="true" style="color: #5fb760"></i><vr />
</div>

<div class="col-sm-1">
    <i class="fa fa-refresh" aria-hidden="true" style="color: #5fb760"></i>
    <vr />
</div>
<div class="col-sm-1">
    <i class="fa fa-refresh" aria-hidden="true" style="color: #5fb760"></i>
    <vr />
</div>
<div class="col-sm-1">
    <i class="fa fa-refresh" aria-hidden="true" style="color: #5fb760"></i>
    <vr />
</div>
<div class="col-sm-1">
    <i class="fa fa-map-marker" aria-hidden="true" style="color: #5fb760"></i>
    <vr />
</div>

</div>
</div>

希望这有帮助