html - 文本在图像旁边居中，如果没有空格，则与顶部对齐

Question

让我们检查一下 this fiddle :

img {
    float: left;
}

#inner {
    height: 128px; 
    background-color: yellowgreen; 
    display: table-cell;
    vertical-align: middle;
}

#content {
    background-color: red;
}

<img src="http://cdn.memegenerator.net/instances/250x250/37934290.jpg" width="128" height="128" />
<div id="inner">
    <div id="content">text text tertkl elknr tlken lsl kdmfsldkfmsldkfmslkd mfkndfln dflkfndg lkn</div>
</div>

这正如我所期望的那样有效——文本居中，当你缩小宽度时，文本会变成下划线:但是它离图像“太远”了。最好的情况是 vertical-align: middle; 在需要跳转时变成 vertical-align: top;。没有 jQuery 怎么办？

Answer 1

实现此目的的一个简单方法是使用 CSS Media Query .

您的标记将保持不变，您的 CSS 只需添加以下内容:

@media screen and (max-width: 290px) {
    #inner {
        vertical-align: top;   
    }
}

^{在行动:http://jsfiddle.net/uWMkH/1/}

意思是，“当视口(viewport)的宽度不超过 290 像素时，对 #inner 执行此操作。

查看这些链接以获取更多信息:

• > http://www.w3.org/TR/css3-mediaqueries/
• > http://cssmediaqueries.com/
• > http://css-tricks.com/css-media-queries/

使用媒体查询执行此操作的警告是 IE8 及更低版本不支持它们。我希望您不必处理这些令人头疼的问题!

在此处查看支持的浏览器的完整列表:

• > http://caniuse.com/#feat=css-mediaqueries