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

Answer 2

Demo

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

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

以图像为中心的多行垂直文本

2 个答案: