Absolute position span vertically and horizontally

HTML & CSS
1

Is there a way to center the spans (irrespective of the content they have) on hover of the items in the ‘Recent Work’ section on this theme? http://themes.premiumpixels.com/scope/

So instead of ‘view project’ I would be able to put in something generated dynamically, and always have it position vertically and horizontally in the middle of the box.

2

Hi,

If you just want IE8 support you can use the display:table properties.

e.g.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
.box {
	width:220px;
	height:160px;
	background:red;
	position:relative;
}
.box span {
	position:absolute;
	left:0;
	top:0;
	width:100%;
	height:100%;
	display:table;
	text-align:center;
}
.box b {
	display:table-cell;
	vertical-align:middle;
}
</style>
</head>

<body>
<div class="box"><span><b>Test</b></span></div>
</body>
</html>

If you want to support older browsers then you;d need the inline-block method shown here on Garys page.

3

Perfect thanks.