显示：表格+显示：表格单元格垂直对齐，但div具有无意义的宽度

Question

我有一个代码来创建包含我希望垂直居中的元素的包装div。 好。这对我来说很好，我可以为顶级父容器指定一个给定的高度，或者为一个包含的元素（img，span等）指定一个高度。我总是右侧垂直居中的元素（这就是我想要的）

但是我有这个错误。

div的宽度具有任意值，就像浏览器分配空间一样。 我不能使用'float'，因为表格技巧不起作用。

下一个例子我有三个div，我有任意宽度.... 我希望第一个和第二个div对齐左边，第三个div对齐。 但是我不能使用float，这是代码（imgs是'cut'，但你可以看到伪图像）

<div style="display: table; width: 200px; background-color: #0099CC;">

  <div style="vertical-align: middle; display: table-cell;">
  <img src="data:image/png;base64,iVBORw0KGg..."=" width="32" height="82"></div>

  <div style="vertical-align: middle; display: table-cell;">
  <span>Load file</span></div>

  <div style="display: table-cell; text-align: center; vertical-align: middle;">
  <img src="data:image/png;base64,iVBORw0KGg..."=" width="32" height="32"></div>

</div>

任何想法都会非常感激，

Answer 1

使用以下过程：

• 将display:table替换为display:inline-block
• 使用带position:relative
的容器div
• 使用text-align: justify平等分配元素
• 使用带position:absolute; right:0;的嵌套div重新对齐第三个元素

以下是一些相关问题：

• How to stretch a fixed number of horizontal navigation items evenly and fully across a specified container

• Styling overlapping annotations in text with HTML <SPAN> tags and CSS