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

Question

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

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

基本上每个div应该是这样的：

到目前为止，我已经能够获得上面列出的一个或多个要求，但不能同时获得所有这些要求。这真的可以用纯CSS，或者我应该放弃浪费我的时间并使用表格？

Answer 1

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

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

float and vertical-align.

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

Answer 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