使用 CSS 将文本与中间图像旁边的回车垂直对齐答案

【问题标题】：Vertical align text with carriage return next to image in the middle with CSS使用 CSS 将文本与中间图像旁边的回车垂直对齐
【发布时间】：2014-09-27 05:39:29
【问题描述】：

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

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

【问题讨论】：

不要使用中断标签作为间距。将第二个文本包裹在适当的文本元素中，并使用边距和填充来定位它。此外，您似乎正在使用表格进行布局......另一个禁忌。
我之前尝试过一个 div 也有同样的问题。
div 不是文本元素。
你能推荐一个元素吗？谷歌搜索“html 文本元素”不会显示任何内容。
喜欢无理由投反对票。

标签： html css image vertical-alignment

【解决方案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;
}

【讨论】：

h1标签底部有很大的空间和我现在的情况一样？
这确实有效，我的显示类型错误，所以我用 display:block 代替了 display:inline

【解决方案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>

已编辑。

【讨论】：

它把它放在
的右边。我希望它在左对齐的正下方。
@MikeFlynn 我编辑了，现在试试，它应该可以工作。在JSFiddle 上按预期工作
它是
并且由于某种原因对我不起作用。这是我上面的原始代码。
我需要文本居中的图像。这会将图像移动到文本的左侧，留下一个巨大的空白。您还需要查看
w3schools.com/tags/tag_br.asp 上的此链接。您的小提琴也将其突出显示为不正确。
@MikeFlynn 对不起，你在<br /> 上是对的。我再次更新了我对您问题的回答。文本现在应该正确地围绕它。

的右边。我希望它在左对齐的正下方。