引导程序在列中间具有图标

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>

您更新的小提琴是here。