html - Bootstrap 在列中间有图标

Question

我正在尝试构建一个网站部分，该部分的行左侧为黑色，右侧为红色。就在中间，我需要从很棒的字体中放一个人字形。 V 形位于黑色和红色上。

我现在的代码是这样的:

<div class="container-fluid" id="banner">
 <div class="row home">
  <div class="col-md-5 d-flex justify-content-end home-region-left align-items-center">
   <h2>Directions</h2>
 </div>
 <div class="col-md-2">
  <%= fa_icon 'chevron-circle-right'%>
 </div>
 <div class="col-md-5 d-flex justify-content-start home-region-right align-items-center">
  <%= form_tag zipcode_path, method: 'get', validate: true do%>
     <p><%=number_field :search, params[:search], required: true%>
        <%=submit_tag 'Search', class: 'btn btn-primary'
     </p>
  <% end %>
 </div>
</div>

这是行不通的。对于初学者来说，中间部分占用了太多空间。

我已经做了几次尝试，但无法弄清楚如何让一个图标恰好位于中间。这是我的 jsfiddle

Answer 1

是这样的吗？

使用 position: absolute 并将 div 居中:

<div class="container-fluid">
  <div class="row chevron">
    <div class="col left-side">
        Left
    </div>
    <div style="z-index: 1000; position: absolute; left: 50%; right: 50%; margin-top: 10px; margin-left: -10px; background: blue; width: 20px; text-align: center;">
      >
    </div>
    <div class="col right-side">
         Right
    </div>
  </div>
</div>

您更新的 fiddle 是 here .