HTML/CSS结构，用于图像旁边垂直居中的文本，左一些元素，右一些元素

我有一个布局结构，我正试图建立在HTML/CSS。本质上，它是一个在网页上运行的顶部栏。在左边，我想要一个正方形的图像，后面是两个或更多的链接，它们与图像垂直居中对齐。在右边，我想要两个在高度上与左边相同的图像。基本上，布局应该如下所示：

我在这方面取得了一些进展。例如，我得到的链接文本与左侧图像垂直居中对齐，如下所示：

  <div style="display:table;">
    <span style="display:table-row">
      <img src="icon.png" style="display:table-cell; vertical-align:middle;"></img>
      <span style="display:table-cell; vertical-align:middle;">LINK1</span>
    </span>
  </div>

链接1

但我发现，当试图将其他图像添加到右侧时，事情开始变得混乱。例如，我将右侧图像添加到更多

元素中，并将

显示：表格单元格

作为样式，但最重要的是将表格宽度拉伸到100%，将单元格向右对齐，调整单元格大小以适应其内容等。我基本上想知道我是否会走错（或过于冗长）的路，试图用表来表达这个结构

我基本上是在寻找HTML结构元素和CSS样式的优雅组合，以实现上图所示的布局。

试试这个

关键是使用

float

HTML

<div class="main">
  <div class="image">Image1</div>
  <div class="image">Image2</div>
  <div class="link">Link1</div>
  <div class="link">Link2</div>
  <div class="image" style="float:right">Image1</div>
  <div class="image" style="float:right">Image2</div>
</div>

---

请查看我的答案，如果它对您有效，请与我联系如何将链接文本与左侧图像垂直居中对齐？是否有一种方法可以在没有所有绝对值的情况下实现此结果？例如，假设整个条形图的高度应基于其中最大的项目（图像或文本），宽度应为100%。@BryceThomas其中没有绝对值，我无法在cssdeck中使用%值，这是我使用“px”的唯一原因。您可以在本地计算机中尝试该代码，并使用%代替px，它应该很好用

.main{
width:800px;
height:500px;
border:1px solid black;
margin-top:20px;
margin-left:20px
}

.image{
  width:13%;
  height:10%;
  border:1px solid red;
  float:left
}

.link{
  width:13%;
  height:10%;
  border:1px solid blue;
  float:left
}