Clickable div with middle vertical aligned image and text - html

Question

Please see the code below, both image and text are located up in the div.
How to vertical align to the middle, both the image (div_a) and the text (div_txt) inside <a>, using pure css, and keep the div clickable (preferred solution with cross browsers compatibility):
<style type="text/css">
a.div_a {
display:block;
width:320px;
height:160px;
background-color:#CCC;}
</style>
<a href="www.mydoamin.com" class="div_a">
<img src="http://jsfiddle.net/img/logo.png" style="float:left; margin-right:10px; background-color:#666;" />
<span class="div_txt">Content</span>
</a>
I tried the following, but that didn’t help:
.div_txt {vertical-align:middle;}
I found separated solutions on the above for image/text, but not for both together.

Answer 1

Give display: table to your anchor element, and then wrap each your image and span in a .wrapper span with the following properties:
.wrapper {
display: table-cell;
vertical-align: middle;
}
HTML:
<a href="www.mydoamin.com" class="div_a">
<span class="wrapper">
<img src="http://jsfiddle.net/img/logo.png" style="background-color:#666;" />
</span>
<span class="wrapper">
<span class="div_txt">Content</span>
</span>
</a>
See DEMO.
Please note that this approach will not work in IE7, so if IE7 support is a requirement, you will have to use a more elaborate method.

Answer 2

Taken from Vertical-align image and altered slightly to account for <a> (jsFiddle demo):
Extra markup for link
a.absoluteCenterWrapper {
display:block;
}
CSS
.absoluteCenterWrapper {
position:relative; /* Contains the image in the div */
}
/* Positioning */
.absoluteCenter {
margin:auto; /* Required */
position:absolute; /* Required */
top:0;bottom:0; /* Aligns Vertically */
}
/* Sizing - resizes down to avoid cutting off */
.absoluteCenter { /* Fallback Sizing */
max-height:100%;
max-width:100%;
}
HTML
<a href="http://www.example.com/" class="absoluteCenterWrapper">
<img src="PATHTOIMAGE" class="absoluteCenter">
<p>Paragraph goes here.</p>
</a>