Left alignment text AND right alignment in CSS

Question

I'm a little new to CSS, and I have a problem that I seem to be unable to solve. I would like to have a series of divs on my page (stacked one on top of the other), and each one should contain text and one or more images.

In particular, I would like the text to be horizontally aligned and vertically centered, and the images should be aligned to the right and the height of the div should be based on the height of the images (which could be a variable).

Basically, each div should look like this:

So far, I have managed to get one or more of the requirements listed above, but never all of them at the same time. Is this possible with pure CSS, or should I just stop wasting my time and use the table?

Answer 1

Hi, I have a solution for you, re-read this link http://jsfiddle.net/8mQc4/15/ .

It uses some properties, for example:

float and vertical-align. 

This code allows the flexible height and width of img, as well as its container center vertically in the text. Just try larger texts or images.

Answer 2

Oh man, I got for you an interesting solution that can work, but nevertheless this is a solid idea!

If you set the image as the background, you can avoid swimming or positioning.

 .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%; } 

The only thing that might seem like a problem to me is the size of the image based on the content inside the div.

JSFIDDLE

This will allow the image to have a fixed size, but! he is faced with the problem of relying on text for size above the image.: /

 background-size: 80px 60px; 

Fixed size

Using min-height: whatever; You can still achieve the desired result, but not 100% better.

min-height