Bootstrap имеет значок в середине столбца

Question

Я пытаюсь создать раздел сайта, у которого левая сторона ряда черная, а правая - красная.Прямо по центру мне нужно поставить шеврон от шрифта потрясающий.Шеврон сидит как на черном, так и на красном.

Мой код на данный момент выглядит так:

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

Ваша обновленная скрипка - здесь .