html - 不使用 HTML 表格居中对齐

Question

好吧，所以我试图让 div 元素在不使用表格的情况下(在两个图像之间)向下对齐(因为表格不应该用于样式/布局)。

我有以下各个元素:

图片

图片

分区

我希望使用 CSS 的最终输出是:

看起来很简单，对吧？好吧，诀窍是图像左侧和右侧的分数宽度可变，我希望圆 Angular 矩形的中心在两个图像之间向右切片，而不管得分值。 (因此，我不能只用一个 div 包裹整个 block 并使用 text-align: center。这对我没有好处。)

正如您在我的示例图片中看到的那样，矩形边缘和右侧得分之间的空间比左侧多，因为左侧得分本身更宽。

另请注意，图像在矩形 div 的上方和下方略微扩展，这是使用表格不理想的另一个原因。

我尝试使用 margin-left: auto、margin-right: auto、display: inline-block 的组合来完成此布局code> 等，但我无法获得我正在寻找的居中效果。

Here is a jsfiddle to play with.

非常感谢您的帮助!

Answer 1

这是交易:

• .team 应该有 width: 50% 并且应该向左浮动。或者对。随便。
• 图像应向中心 float 。左边的应该向右浮动，右边的应该向左浮动。
• 图像还应该有 position: relative 和负的 top。
• .team 也应该设置 text-align。左边的应该有 text-align: right
• 外部容器应将 overflow 设置为 visible(这是默认设置 - 我只是想提一下，因为其他答案告诉您使用 overflow:隐藏。这会破坏你的“开箱即用”的东西)。

这应该可以满足您的需求。 And here's proof (在您发布 fiddle 之前开始)