使用CSS将带有回车的垂直对齐文本放在中间的图像旁边

Question

我无法将下面的文字显示为在两个文本之间有空格的图像旁边的垂直对齐方式。总有这个空白。如果我删除图像本身，线条可以正常工作。

<td class="document-header">
    <img style="vertical-align: middle; padding-bottom: 0" src="http://localhost:2222/assets/images/2771?w=75&amp;h=75" alt="Basketball Tournament Tournament">
                                    <div style="display: inline; text-align: left">
                                        <h1 style="display: inline;">
                                            Basketball Tournament Tournament
                                        </h1>
                                        <br/>Apr 23-24, 2014
                                    </div>
                        </td>

Answer 1

JSfiddle Demo

<强> HTML

<div class="wrap">
    <img src="http://lorempixel.com/output/city-q-c-75-75-6.jpg" alt=""/>
    <div class="text">
        <h1>Main Heading</h1>
        <h2>Sub Heading</h2>
    </div>
</div>

<强> CSS

.wrap img {
    display: inline-block;
    vertical-align: middle;
}

.wrap .text {
    display: inline-block;
    vertical-align: middle;
}
h2 {
    text-align: center;
}

Answer 2

使用您自己的HTML：http://jsfiddle.net/Mr34r/1/

<td class="document-header">
    <img style="vertical-align: middle; padding-bottom: 0; display:inline-block;" src="http://localhost:2222/assets/images/2771?w=75&amp;h=75" alt="Basketball Tournament Tournament">
    <div style="display: inline-block; text-align: left">
         <h1 style="display: inline;">
            Basketball Tournament Tournament
        </h1>

        <br/>Apr 23-24, 2014
    </div>
</td>

<强>编辑。