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

Question

让我们检查一下这个小提琴：

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 媒体查询。

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

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

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

这就是说，“当视口的宽度不超过 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

Answer 2

你可以在没有媒体查询的情况下做到这一点，但它需要一个支持整个CSS 灵活框模块的浏览器（大多数浏览器都缺少对换行的支持）。目前，支持仅限于 Opera、Chrome 和 IE10。

http://codepen.io/cimmanon/pen/rFdkt

figure {
  display: -ms-flexbox;
  display: -webkit-flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  background-color: yellowgreen;
}
@supports (flex-wrap: wrap) {
  figure {
    display: flex;
  }
}

figcaption {
  -webkit-flex: 1 15em;
  -ms-flex: 1 15em;
  flex: 1 15em;
  background-color: red;
}

Flexbox 通过媒体查询提供的是基于可用空间重排内容的能力，而不仅仅是浏览器宽度。