StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>You need not apologise for naivete. <strong>Vertical Centering</strong> is one of the most misunderstood parts of CSS.. and unfortunately, while there is an easy solution - to use the <code>table display properties</code> - they are not supported by IE7 and below..</p> <p>So some form of hack is necessary for them, what is your support requirements?</p> <p>The optimal IE solution I have involves a hack to both the HTML and CSS (and extra HTML element is helpful for them)</p> <p>Here's the code that should work <strong>without</strong> IE6/7 support:</p> <p><strong>HTML is as yours above</strong></p> <p><strong>CSS:</strong></p> <pre><code>table { table-layout: fixed; width: 403px; border-collapse: collapse; border-spacing: 0; } .imgcontainer { text-align: center; padding: 0; vertical-align: middle; border: 1px solid #000; } .imgcontainer img { float: left; width: 200px; height: 200px; border: 0; } .imgcontainer a { display: block; width: 200px; height: 200px; overflow: hidden; cursor: pointer; text-decoration: none; } .imgcontainer a:hover img { margin-right: -200px; } .imgcontainer a .desc { display: table-cell; vertical-align: middle; border-spacing: 0; border-collapse: collapse; width: 200px; height: 200px; padding: 10px; background: #cfc; } .imgcontainer a:hover .desc { background: #DDD; opacity: .75; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=75)"; } </code></pre> <h2>Working Example : <a href="http://jsfiddle.net/clairesuzy/ug7sv/" rel="nofollow">HERE</a></h2> <hr> <p>and: <strong>with optimal IE6/7Support</strong></p> <p>add an <code><i></i></code> element between the <code>img</code> and <code>span</code> in the HTML like this:</p> <pre><code><td class ="imgcontainer"> <a href="#"> <img src="http://www.bigjimsburgers.com/burger.jpg" alt="" /> <i></i> <span class="desc">misaligned text</span> </a> </td> </code></pre> <p>Then conditional CSS : (add to a sheet that comes after the main stuff above)</p> <pre><code> </code></pre> <hr> <p><strong>OR</strong> - without the extra HTML element or proper vertical centering</p> <p>If you don't want to add the extra HTML <code><i></i></code> element for IE6/7 you could combine the first solution with a top padding solution, which won't perfectly vertically centre the text but should provide a graceful fall-back for IE6/7.</p> <p>in which case the IE conditional CSS would look like this:</p> <pre><code> </code></pre> <hr> <h3>Update</h3> <p>as per comments, to make this work and retain border-spacing on the parent table you would remove the table CSS</p> <pre><code>table { /* table-layout: fixed; width: 403px; border-collapse: collapse; border-spacing: 0; */ } </code></pre> <p>and then <strong>ADD</strong> <code>border-spacing: 0;</code> to the <code>a</code></p> <pre><code>.imgcontainer a { display: block; width: 200px; height: 200px; overflow: hidden; cursor: pointer; text-decoration: none; border-spacing: 0; } </code></pre> <p>adding the above means the <code>span</code> which is set to <code>display: table-cell;</code> doesn't inherit the <code>border-spacing</code> on the parent table</p> <h3><a href="http://jsfiddle.net/clairesuzy/Cqsh3/" rel="nofollow">Working example</a> with border-spacing</h3>

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