在图像旁边居中的多行垂直文本答案

【问题标题】：Multi-line vertical text centering next to an image在图像旁边居中的多行垂直文本
【发布时间】：2014-05-17 10:07:37
【问题描述】：

使用下面的代码（以及我尝试过的其他几种变体），当我缩小浏览器窗口并且我的文本变成多行时，下一行总是落在文本左侧的图像下方。如何保持生成的多行文本在图像旁边垂直对齐？我注意到图像旁边有很多单行文本的解决方案，但没有看到多行文本的解决方案。

<div id="printnotice" style="float:left;margin-top:5px;margin-bottom:10px;width:95%;text-align:center;">
    <div style="float:left;margin:auto;display:block;">     
        <img style="align:left;vertical-align:middle;" alt="STOP" src="/Portal Content/Home/Stop">
        <span style="margin-left:20px;font-family:Calibri;font-size:1.5em;">Required: Print Registration Information and Support Options and give to customer</span>
    </div>

</div>

【问题讨论】：

请使用样式表而不是内联样式：jsfiddle.net/D6P48
没有任何align 属性。
请看Why use CSS

标签： css html text vertical-alignment

【解决方案1】：

如果你需要右边的文字与图片垂直对齐，你可以使用display:table;和display:table-cell;

看到这个FIDDLE

HTML：

<div id="printnotice">
    <div>
        <span><img alt="STOP" src="http://lorempixel.com/output/food-h-g-198-256-8.jpg" /></span>
        <span>Required: Print Registration Information and Support Options and give to customer</span>
    </div>
</div>

CSS：

#printnotice {
    float:left;
    margin-top:5px;
    margin-bottom:10px;
    width:95%;
    text-align:center;
}
#printnotice div {
    float:left;
    margin:auto;
    display:table;
}
#printnotice span {
    display:table-cell;
    vertical-align:middle;
    margin-left:20px;
    font-family:Calibri;
    font-size:1.5em;
}

【讨论】：

【解决方案2】：

Demo

您可以浮动图像并将overflow: hidden 添加到文本包装器中：

#printnotice img {
    float: left;
}
#printnotice span {
    overflow: hidden;
    display: block;
}

【讨论】：