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

Question

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

此刻，我可以得到 fiddle 中的所有内容绿色和橙色箭头未正确对齐。

为了使箭头和桌面对齐成一条直线，我使用的 CSS 代码是:

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

问题陈述:

我想知道我应该对 fiddle 进行哪些更改，以便我能够在桌面之间的直线上对齐绿色和橙色箭头。

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>