Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>Use display:table together with display:table-cell as shown in my <a href="http://jsfiddle.net/9UMxW/" rel="nofollow">jsfiddle</a>. Also don't use background-images for icons unless you don't have them in vector/SVG format, in you'r case it looks like you can get those icons from a free icon set.</p> <p>Go to <a href="http://fontello.com" rel="nofollow">fontello.com</a> or similar and create a font there (like I have in my example) and use that custom font you created.</p> <p><strong>HTML</strong></p> <pre><code>&lt;ul&gt; &lt;li&gt; &lt;i class="icon-glass"&gt;&lt;/i&gt; &lt;p&gt;This will be a day long remembered. It has seen the end of Kenobi, and will soon see the end of the rebellion.&lt;/p&gt; &lt;/li&gt; &lt;li&gt; &lt;i class="icon-music"&gt;&lt;/i&gt; &lt;p&gt;If this is a consular ship, where is the ambassador? — Commander, tear this ship apart until you’ve found those plans. And bring me the passengers, I want them alive!If this is a consular ship, where is the ambassador? — Commander, tear this ship apart until you’ve found those plans. And bring me the passengers, I want them alive!&lt;/p&gt; &lt;/li&gt; &lt;li&gt; &lt;i class="icon-search"&gt;&lt;/i&gt; &lt;p&gt;Look, good against remotes is one thing, good against the living, that’s something else.&lt;/p&gt; &lt;/li&gt; &lt;/ul&gt; </code></pre> <p><strong>CSS</strong></p> <pre><code>li { display: table; width: 50%; margin-top: 20px; } p { vertical-align: middle; display: table-cell; } i { vertical-align: middle; display: table-cell; width: 40px; } </code></pre> <p>If you don't like using <code>display: table</code>, add a "ghost element" with the <code>:before</code> selector which works good together with <code>display: inline-block</code>. Read more about vertical align at this <a href="http://css-tricks.com/centering-in-the-unknown/" rel="nofollow">css-tricks.com</a> article.</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.
 

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