StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>Couple of things:</p> <ul> <li>Since you know the height of your image, to get the exact alignment you want, try setting a <code>line-height</code>. You can set it at 15px or 1 (just 1, no unit), and see which you prefer.</li> <li>Change your value for vertical-align. It's meant to control the vertical alignment of two inline (or inline-block) items next to each other. Which is what you have when you have <code>strong</code> next to <code>img</code>, it's just that <code>middle</code> doesn't look the way you want. Other values that work reasonably well cross-browser are <code>baseline</code>, <code>top</code>, <code>bottom</code> and sometimes <code>text-top</code> or <code>text-bottom</code>.</li> <li>Beyond that, you can set both the <code>img</code> and the <code>strong</code> to <code>block</code> and use <code>float</code>, <code>height</code>, and <code>padding</code>.</li> </ul> <p>Examples:</p> <pre><code><div style="padding-left: 50px; line-height: 15px;"> <strong>NONE</strong> <img height="15" width="15" src="images/Checked.gif" alt=""> <br> <span style="font-size: larger;">DEFAULT</span> </div> <div style="padding-left: 50px; vertical-align: top;"> <strong>NONE</strong> <img height="15" width="15" src="images/Checked.gif" alt=""> <br> <span style="font-size: larger;">DEFAULT</span> </div> </code></pre> <p>Others have already down an example with floats.</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

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