css - 如何在不进行手动高度/边距计算的情况下将两个元素右对齐？

Question

This fiddle演示问题。

我正在尝试将图像和按钮作为一个联合单元在两条单独的线上向右对齐。我创建了一个带有 position:relative 的包装器 div(“right-stuff”)，所以我可以在它的子按钮上使用 position:absolute。

问题是我不知道在不影响高度计算的情况下将按钮右对齐的好方法。

我所做的是给它 position:absolute 和 right:0，但这会将它从流程中移除，并导致容器(“right-stuff”)不包括它 - 看看红色背景如何没有到达它，尽管它“应该”。

另一个问题是流程中“right-stuff”之后的下一个元素需要一个 margin-top 才能处于正确的位置，否则我必须给“right-stuff”一个我自己计算的宽度，或人工边距(考虑到按钮高度)。这里的知识太多了。

有没有更好的方法让两个元素作为一个连贯的单元，即“右对齐”，但又不脱离流程？

显然这不是第一次有人问这个问题，但我在这里没有找到解决这些特定问题的答案，而无需丑陋的技巧(比如手动添加等于按钮高度的边距底部)。

编辑:text-align 是一个不错的解决方案(比我想象的要好)。一个警告:它假设按钮确实是文本的，并且对图像本身不起作用。这在我的示例中没问题，因为图像是容器中最宽的东西——但是如果我在容器中有另一个元素比图像宽怎么办？如何使图像保持右对齐？

Answer 1

是的，因为这两个元素(img 和 button)都是 inline-block 你可以简单地使用 text-align : 对。