html - 显示 :table + display: table-cell does vertical align but divs have nonsense widths

Question

我有一个代码来创建包装器 div，其中包含我想要垂直居中的元素。好的。这对我来说很好用，我可以为顶级父容器指定一个给定的高度，或者为包含的元素之一(img、span 等)指定一个给定的高度。我总是让元素垂直居中(这就是我想要的)

但是我有这个错误。

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

下一个例子我有三个 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:inline-block替换display:table
• 使用带有 position:relative 的容器 div>
• 使用text-align: justify 平均分布元素
• 使用嵌套的 div 和 position:absolute; right:0; 重新对齐第三个元素

下面是一些相关的问题:

• 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