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

With the code below (and several other variations I've tried), when I shrink the browser window and my text becomes multi-lined, the next lines always falls below the image I have to the left of the text. How can I keep the resulting multi-line text vertically aligned next to the image? I've noticed plenty of solutions for single line text next to an image but haven't seen any for multi-line text.

使用下面的代码(以及我尝试过的其他几个变体),当我收缩浏览器窗口并且我的文本变成多行时,下一行总是低于文本左侧的图像。如何将生成的多行文本垂直对齐到图像旁边?我已经注意到图像旁边的单行文本有很多解决方案,但是没有看到任何多行文本。

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

2 个解决方案

#1

Demo

You can do that floating the image and adding overflow: hidden to the text wrapper:

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

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

#2

If you need the text on the right to be verticaly align next to the image, you can use display:table; and display:table-cell;

如果您需要右侧的文本在图像旁边进行垂直对齐,则可以使用display:table;并显示:table-cell;

See this FIDDLE

看到这个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;
}

#1