Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>Be aware that the <code>line-height</code> approach fails if you have a long sentence in the <code>span</code> which breaks the line because there's not enough space. In this case, you would have two lines with a gap with the height of the N pixels specified in the property.</p> <p>I stuck into it when I wanted to show an image with vertically centered text on its right side which works in a responsive web application. As a base I use the approach suggested by Eric Nickus and Felipe Tadeo. </p> <p>If you want to achieve:</p> <p><a href="https://i.stack.imgur.com/UUVhK.png" rel="noreferrer"><img src="https://i.stack.imgur.com/UUVhK.png" alt="desktop"></a></p> <p>and this:</p> <p><a href="https://i.stack.imgur.com/ttNcE.png" rel="noreferrer"><img src="https://i.stack.imgur.com/ttNcE.png" alt="mobile"></a></p> <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code"> <pre class="snippet-code-css lang-css prettyprint-override"><code>.container { background: url( "https://i.imgur.com/tAlPtC4.jpg" ) no-repeat; display: inline-block; background-size: 40px 40px; /* image's size */ height: 40px; /* image's height */ padding-left: 50px; /* image's width plus 10 px (margin between text and image) */ } .container span { height: 40px; /* image's height */ display: table-cell; vertical-align: middle; }</code></pre> <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;span class="container"&gt; &lt;span&gt;This is a centered sentence next to an image&lt;/span&gt; &lt;/span&gt;</code></pre> </div> </div> </p>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    2. VO
      singulars
      1. This table or related slice is empty.
    3. VO
      singulars
      1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload