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;
????
????
}
PaulOB
July 31, 2013, 1:02pm
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>