如何在块元素中垂直居中放置图像和文本？ [CSS]

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 30x30 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.

Answer 2

You can set the line-height to 40px, that should cause the text to be vertically centred if it is only one line.

h2 {
    line-height: 40px;
}
h2 img {
    padding: 5px;
    vertical-align: middle;
}