How do I center text on top of an image in both dimensions?

The optimal IE solution I have involves a hack to both the HTML and CSS (and extra HTML element is helpful for them) Here's the code that should work without IE6/7 support: HTML is as yours above CSS: 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)"; } Working Example : HERE and: with optimal IE6/7Support add an i> misaligned text.

You need not apologise for naivete. Vertical Centering is one of the most misunderstood parts of CSS.. and unfortunately, while there is an easy solution - to use the table display properties - they are not supported by IE7 and below.. So some form of hack is necessary for them, what is your support requirements? The optimal IE solution I have involves a hack to both the HTML and CSS (and extra HTML element is helpful for them) Here's the code that should work without IE6/7 support: HTML is as yours above CSS: 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)"; } Working Example : HERE and: with optimal IE6/7Support add an element between the img and span in the HTML like this: misaligned text Then conditional CSS : (add to a sheet that comes after the main stuff above) OR - without the extra HTML element or proper vertical centering If you don't want to add the extra HTML 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.In which case the IE conditional CSS would look like this: Update as per comments, to make this work and retain border-spacing on the parent table you would remove the table CSS table { /* table-layout: fixed; width: 403px; border-collapse: collapse; border-spacing: 0; */ } and then ADD border-spacing: 0; to the a .

Imgcontainer a { display: block; width: 200px; height: 200px; overflow: hidden; cursor: pointer; text-decoration: none; border-spacing: 0; } adding the above means the span which is set to display: table-cell; doesn't inherit the border-spacing on the parent table Working example with border-spacing.

1 for a working, well explained answer. – thirtydot May 27 at 13:27 Thanks! Is there any way to get this CSS to function properly with border spacing?

– synchronicity May 30 at 16:33 1 Yes.. remove all the table {} CSS or adjust your border-spacing to suit and add border-spacing: 0; to the . Imgcontainer a {} CSS - IE works fine without any adjustments. – clairesuzy May 31 at 6:40 Thanks so much.

– synchronicity May 31 at 8:35.

Here is a live demo: jsfiddle.net/CKRZg/23/ Here is the new CSS: . Imgcontainer { overflow: hidden; float: left; position: relative; } . Imgcontainer img { float: left; padding: 5px; background: #fff; width: 500px; height: 500px; } .

Imgcontainer a . Desc { display: none; font-size: 1.2em; } . Imgcontainer a:hover { cursor: pointer; text-decoration: none; } .

Imgcontainer a:hover . Desc { display: block; text-align: center; width:500px; line-height:500px; background: #111; filter: alpha(opacity=75); opacity: .75; -ms-filter: "progid:DXImageTransform.Microsoft. Alpha(Opacity=75)"; color: #fff; position: absolute; top: 0px; left: 0px; width: 500px; height: 500px; }.

3 Due to your use of line-height:500px, this will only work for a single line of text. That might not matter, but it should be mentioned regardless. – thirtydot May 25 at 23:19 If this is actually an answer, please include the markup and css in your answer, not just a link to jsfiddle.

– Jared Farrish May 25 at 23:20 true, he can always play with margin-top and set a class to 2 lined images :) – SnippetSpace May 25 at 23:21 1 This works great, thanks a lot! – synchronicity May 25 at 23:26 1 Read the comments above :). Set a Spanish around it, remove the line height and use padding to set the Spanish in the center.

Or try to make it a table-cell with a vertical align applied to it :) – SnippetSpace May 257 at 9:49.

You could also do it with padding. This will handle wrapped text. .

Imgcontainer { overflow: hidden; float: left; position: relative; } . Imgcontainer img { float: left; padding: 5px; background: #fff; width: 500px; height: 500px; } . Imgcontainer a .

Desc { display: none; font-size: 1.2em; padding: 50% 0; } . Imgcontainer a:hover { cursor: pointer; text-decoration: none; } . Imgcontainer a:hover .

Desc { display: -webkit-box; display: -moz-box; display: block; -webkit-box-align: center; text-align: center; background: #111; filter: alpha(opacity=75); opacity: .75; -ms-filter: "progid:DXImageTransform.Microsoft. Alpha(Opacity=75)"; color: #fff; position: absolute; top: 0px; left: 0px; width: 500px; height: 500px; }.

Please see my edit above. – synchronicity May 27 at 7:12.

Use display:block, display:box is invalid. That will fix horizontal centering. Vertical centering is a bit more tricky since html is not meant to be concerned with the virtical layout of pages, only horizontal.

See: What is vertical-align used for in CSS?

Display: box is a CSS3 thing. Here's a random Google result: hacks.mozilla. Org/2010/04/the-css-3-flexible-box-model – thirtydot May 25 at 23:25 k, cool stuff.

But still: not supported by IE, and experimental in moz/webkit. Not quite a deploy ready feature if you ask me. – colinross May 25 at 23:52.

Here is another way. Doesn't work in IE6 though. CSS: * { margin:0; padding:0 } .

Desc { position:relative; display:inline-block } . Desc img { vertical-align:middle } . Desc span { position:absolute; left:0; width:100%; height:100%; line-height:100px; background:black; text-align:center; color:white; display:none } .

Desc:hover span { display:inline-block } HTML: Description.

I cant really gove you an answer,but what I can give you is a way to a solution, that is you have to find the anglde that you relate to or peaks your interest. A good paper is one that people get drawn into because it reaches them ln some way.As for me WW11 to me, I think of the holocaust and the effect it had on the survivors, their families and those who stood by and did nothing until it was too late.