Vertically center content on a dynamic image?

HTML & CSS
1

Anyone know how I can vertically align the content of “box” while box beeing absolute positioned and 100% width/height ofo the IMG, which is responsive to its parent which has a width of 25% of the body.

<a href="#">
<img />
<div class="box">
<h2>text</h2>
<p>text</p>
</div>
</a>

a{
width: 25%;
display: block;
float: left;
position: relative;
}

img{
width: 100%;
}

.box{
position: absolute;
top: 0;
left: 0;
????
????
}
2

Hi,

I assume this html5 and ie8+ so you could do something like this:


<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
a {
	width: 25%;
	display: block;
	float: left;
	position: relative;
}
img {
	width: 100%;
	height:auto;
	display:block;
}
a {
	display:block;
	width:50%;
	border:1px solid red;
	position:relative;
}
.box {
	position: absolute;
	top: 0;
	left: 0;
	right:0;
	bottom:0;
}
.boxtable {
	width:10%;
	height:100%;
	display:table;
}
.inner {
	display:table-cell;
	vertical-align:middle;
	width:100%;
	height:100%;
}
</style>
</head>

<body>
<a href="#"> <img src="http://placehold.it/350x150" />
<div class="box">
		<div class="boxtable">
				<div class="inner">
						<h2>text</h2>
						<p>text</p>
				</div>
		</div>
</div>
</a>
</body>
</html>