Html 垂直对齐文本与马车返回到旁边的图像在中间与CSS

我无法使下面的文本垂直对齐到两段文本之间有空格的图像旁边。总是有这样的空白。如果我删除图像本身，线条将正常工作

<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>

篮球锦标赛

2014年4月23日至24日

使用您自己的HTML：

篮球锦标赛

2014年4月23日至24日

已编辑。

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>

---

不要将打断标记用于间距。用适当的文本元素包装第二个文本，并使用边距和填充来定位它。另外，看起来您正在使用表格进行布局…另一个禁忌。我以前也尝试过一个div，但有相同的问题。div不是文本元素。您能推荐一个元素吗？谷歌搜索“html文本元素”不会带来任何东西。喜欢无理由发布的否决票。它把它放在页面右侧。我希望它在左对齐的正下方。@MikeFlynn我编辑过，现在试试，应该可以了。在它的
上按预期工作，但由于某些原因，它对我不起作用。上面是我的原始代码。我需要文本居中的图像。这会将图像移到文本的左侧，留下巨大的空白。您还需要查看
上的此链接。您的小提琴还突出显示它不正确。@MikeFlynn对不起，您的

是对的。我再次更新了你问题的答案。文本现在应该正确地环绕它。h1标记在底部有一个巨大的空间，就像我目前的情况一样？这实际上是可行的，我的显示类型错误，所以我使用了display:inline，而不是display:block和

<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>

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

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