Question

I am trying to accomplish this with CSS. Here is my markup:

<h2>
  <img src="A.gif" alt="A" width="30" height="30" />
  <img src="B.gif" alt="B" width="30" height="30" />
  18 pt; vertically centered;
</h2>

• A and B are 30×30 pixel images.
• Small red lines are 5 pixels paddings/margins (whichever works)
• As a result of the images’ height and vertical padding, the outermost container has a height of 40px (30+5+5).
• The width of the outermost container is 100%.

Note: There is no chance the 18pt text will overflow the width of the container. Assume it will always be one line.

Note: If more markup would help get the desired view, the markup can be modified.

How can this be accomplished?

Answer 1

If I’m not mistaken, you can use the vertical-align: text-bottom property on an img to achieve this kind of result.

Here’s a little test: http://www.w3schools.com/Css/tryit.asp?filename=trycss_vertical-align

You can try removing the styles there and replacing them with
img { vertical-align: text-bottom; }
and the text should be aligned to the desired centre of the page element.