I am testing out this method (first answer) to vertically align an image over a div that has the following additional css properties so it occupies the entire space:
position: absolute;
top: 0px;
bottom: 0px;
left: 0px;
right:0px;
The issue is, even with the fiddle mentioned in the original question (here), when you add another span with text separated by a <br/>, this span ends up outside of the containing div.
I aim to have both the image and caption positioned within the div.
Any suggestions?
HTML:
<html>
<head>
<title>Splash screen</title>
<style>
.frame {
position: absolute;
top: 0px;
bottom: 0px;
left: 0px;
right:0px;
text-align: center;
}
.helper {
display: inline-block;
height: 100%;
vertical-align: middle;
}
img {
vertical-align: middle;
max-height: 25px;
max-width: 160px;
}
</style>
</head>
<body>
<div class="frame">
<span class="helper"></span>
<img class="center" src="img/splash/splash.png" />
<br />
HELLO WORLD
</div>
</body>