代码之家 › 专栏 › 技术社区 › flash

如何在HTML/CSS中对齐直线形状之间的箭头?

css html

flash · 技术社区 · 6 年前

我有一个屏幕截图,如下所示,我正在尝试用HTML/CSS复制:

现在,我可以把所有东西都装进去了 fiddle 绿色和橙色箭头未正确对齐。

我用来排列箭头和桌面的CSS代码是:

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

问题陈述:

我想知道我应该在小提琴上做些什么改变,这样我就可以在桌面之间沿直线对齐绿色和橙色箭头。

1 回复 | 直到 6 年前

Nenad Vracar 6 年前

您可以将它们包装在一个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>