StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<blockquote> <p><strong>Question</strong><br> Doesn't the vertical align of the TD should vertical align all its childs ?</p> </blockquote> <p><strong>NO</strong>.<br> When you apply <code>vertical-align</code> to <code>td</code>, it is only applied to <code>td</code>, and is <strong>not</strong> inherited by any of its children.</p> <blockquote> <p>If i have a TD with only span in it - it will vertical align. If I had a TD with only IMG inside it - it will also align.</p> </blockquote> <p>This is because of the way <code>vertical-align</code> for <code>td</code> works. The total height of the cell i.e <code>td</code> is calculated and <strong>the whole cell</strong> is aligned vertically.</p> <p>If there is a single <code>img</code>, then the height of <code>td</code> is same as that of <code>img</code>, so it <strong>seems</strong> that <code>vertical-align</code> for <code>img</code> is also <code>middle</code>. But actually, the <code>td</code> is vertically aligned to the middle with the <code>img</code> as <code>vertical-align : baseline</code></p> <p>Same is the case when there is a single <code>span</code>.</p> <blockquote> <p>but if i have both - it doesn't. why is that ? </p> </blockquote> <p>Because now, the <code>height</code> of <code>td</code> is the combined <code>height</code> of both <code>img</code> + <code>span</code>. So, actually, <code>td</code> is vertically aligned in the middle, but not <code>img</code> and <code>span</code>.</p> <blockquote> <p>How can I make the span to be centered as well ? </p> </blockquote> <p>You need to apply this CSS : </p> <pre><code>td > * { vertical-align : middle; } </code></pre> <p>This will apply the CSS to all the children.</p> <p>Check the <a href="http://jsfiddle.net/vXfWV/" rel="noreferrer">JSFiddle</a> for a better picture.</p> <p>Hope, this answers your question.</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