CSS中的左对齐文本和右对齐图像答案

【问题标题】：Left align text AND right align image in CSSCSS中的左对齐文本和右对齐图像
【发布时间】：2013-10-19 05:57:23
【问题描述】：

我对 CSS 有点陌生，但我遇到了一个似乎无法解决的问题。我想在我的页面上有一系列 div（一个堆叠在另一个之上），每个 div 都应该包含一些文本和一个或多个图像。

特别是，我希望文本左对齐，中间垂直对齐，图像右对齐，div的高度应该基于图像的高度（可以是变量）。

基本上每个 div 应该如下所示：

到目前为止，我已经能够满足上面列出的一项或多项要求，但无法同时满足所有要求。纯 CSS 真的可以做到这一点，还是我应该停止浪费时间并使用表格？

【问题讨论】：

请发布您的 HTML 和文本。有了 4K+ 代表，您现在应该知道我们需要什么了。
我本身没有任何 HTML。它实际上是一个文本块和两个图像。我尝试了一堆组合都无济于事，所以我看不出发布其中一个会有什么帮助。
喜欢这个？ jsfiddle.net/Y6ak3
如果高度是基于图像的，那么你会遇到一些困难。如果你用文字切换图像，那么你的生活会容易得多。我并不是说这不是不可能的，所以给我一些不好的尝试吧！
@A.R. JoshC 给了你代码，你所要做的就是修改它以满足你的需要。

标签： css html layout

【解决方案1】：

您好，我有一个解决方案，请查看此链接http://jsfiddle.net/8mQc4/15/。

它基于使用一些属性，例如：

float and vertical-align.

此代码允许 img 的灵活高度和宽度，以及他的容器垂直中心 de text.Just 尝试更大的文本或图像。

【讨论】：

很高兴知道为什么这被否决了。它是唯一真正有效的。
我真的不知道为什么有人不赞成这可能是因为有些人不喜欢使用 float :P
谁知道呢。也许是因为其中提到了表格，尽管可能是唯一完全正确的东西。

这已经足够接近了。如果图像高度不同，它会有点不稳定，但在我的情况下，我所有的图像都是相同的高度，所以我可以。

【解决方案2】：

哦，伙计，我为您提供了一个有趣的解决方案，它可能有效，但仍然是一个可靠的想法！

如果将图片设置为背景，可以避免浮动或定位。

.section {
   background: url(http://jpowell43.mydevryportfolio.com/flatDesign/images/tab-2.svg) no-repeat rgba(255, 255, 0, 0.4);
   background-position: center right;
   background-size: contain;
   width: 100%;
}

我可能发现的唯一问题是图像大小取决于 div 内部的内容。

JSFIDDLE

这将允许图像具有固定大小，但是！它确实遇到了依赖文本来确定图像大小的问题。：/

background-size: 80px 60px;

Fixed size

使用min-height: whatever; 仍然可以达到预期的效果，但不是100% 最好。

min-height

【讨论】：

如果您希望img 具有固定尺寸怎么办？
是的，我刚刚遇到了这个问题，所以让我看看是否有办法实现这一点，否则我可以删除答案。
我不会说删除答案，但它仍然有用。
好吧，我就不说了！可悲的是，这不是最好的答案，但它是我认为某人的解决方案。