Text centered next to image, and if no space, aligned to top

Question

Let's check 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>

this works so far as I expect - text is centered, and as you shrink the width, text goes underline: but then its "too far" from the image. The best would be if the vertical-align: middle; became vertical-align: top; when it needs to jump. How to do it without possibly jQuery?

Answer 1

A simple way to achieve this is to use a CSS Media Query .

Your markup would stay the same and your CSS would only need to have the following added:

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

^{in action: http://jsfiddle.net/uWMkH/1/}

What that says is, "When the viewport's width is no more than 290px, do this stuff to #inner .

Take a look at these links for more information:

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

The caveat with using media queries to do this is that they aren't supported in IE8 and below. I hope you don't have to deal with those headaches!

Look here for a complete list of browsers with support:

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

Answer 2

You can do this without media queries, but it requires a browser that supports the entire CSS Flexible box module (most browsers are missing support for wrapping). At this point in time, support is limited to Opera, Chrome, and 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;
}

What Flexbox offers over media queries is the ability to reflow the content based on the available space, not just the browser width.