css - 图像旁边的多行垂直文本居中

Question

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

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

Answer 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;
}