如何在html / css中以直线对齐形状之间的箭头？

Question

我有一个如下所示的屏幕截图，我试图在html / css中复制：

https://reactjs.org/docs/react-component.html#forceupdate

此时，我能够在中获得绿色和橙色箭头未正确对齐的所有内容。

我用于将箭头和桌面直线对齐的CSS代码是：

{{1}}

问题陈述：

我想知道我应该在小提琴中做出哪些改变，以便能够在桌面之间以直线对齐绿色和橙色箭头。

Answer 1

您可以将它们包装在一个div元素中，并在该div上使用text-align: center。

.tvs {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem;
}

.arrows-element {
  text-align: center;
}

<div class="tvs">

  <div class="arrows">
    <img src="https://thebettersoftwarecompany.com/wp-content/uploads/2018/05/End-Arrows-left.png" alt="" width="49" height="62" class="aligncenter size-full wp-image-8105" />
  </div>
  <div class="tv">
    <img src="https://thebettersoftwarecompany.com/wp-content/uploads/2018/05/Tv-Screen-2.png" alt="" width="177" height="129" class="aligncenter size-full wp-image-8081" />
  </div>

  <div class="arrows-element">
    <div class="green-arrow">
      <img src="https://thebettersoftwarecompany.com/wp-content/uploads/2018/05/green-arrow.png" alt="" width="49" height="24" class="aligncenter size-full wp-image-8109">
    </div>

    <div class="orange-arrow">
      <img src="https://thebettersoftwarecompany.com/wp-content/uploads/2018/05/orange-arrow-v1.png" alt="" width="126" height="24" class="aligncenter size-full wp-image-8114" />
    </div>
  </div>


  <div class="tv">
    <img src="https://thebettersoftwarecompany.com/wp-content/uploads/2018/05/Tv-Screen-2.png" alt="" width="177" height="129" class="aligncenter size-full wp-image-8081" />
  </div>

  <div class="arrows-element">
    <div class="green-arrow">
      <img src="https://thebettersoftwarecompany.com/wp-content/uploads/2018/05/green-arrow.png" alt="" width="49" height="24" class="aligncenter size-full wp-image-8109">
    </div>

    <div class="orange-arrow">
      <img src="https://thebettersoftwarecompany.com/wp-content/uploads/2018/05/orange-arrow-v1.png" alt="" width="126" height="24" class="aligncenter size-full wp-image-8114" />
    </div>
  </div>


  <div class="tv">
    <img src="https://thebettersoftwarecompany.com/wp-content/uploads/2018/05/Tv-Screen-2.png" alt="" width="177" height="129" class="aligncenter size-full wp-image-8081" />
  </div>

  <div class="arrows-element">
    <div class="green-arrow">
      <img src="https://thebettersoftwarecompany.com/wp-content/uploads/2018/05/green-arrow.png" alt="" width="49" height="24" class="aligncenter size-full wp-image-8109">
    </div>

    <div class="orange-arrow">
      <img src="https://thebettersoftwarecompany.com/wp-content/uploads/2018/05/orange-arrow-v1.png" alt="" width="126" height="24" class="aligncenter size-full wp-image-8114" />
    </div>
  </div>


  <div class="tv">
    <img src="https://thebettersoftwarecompany.com/wp-content/uploads/2018/05/Tv-Screen-2.png" alt="" width="177" height="129" class="aligncenter size-full wp-image-8081" />
  </div>

  <div class="arrows">
    <img src="https://thebettersoftwarecompany.com/wp-content/uploads/2018/05/End-Arrows-right.png" alt="" width="49" height="62" class="aligncenter size-full wp-image-8105" />
  </div>

</div>