I'm struggling to vertically align certain rows of text within a parent div. The following simple example demonstrates exactly what I'm aiming for. It seems like such a basic task, but despite hours of searching, I still haven't found a solution! Any help you can offer would be greatly appreciated.
<html>
<header>
<style type="text/css">
.outer
{
}
.inner1
{
float:left;
width:80px;
height:80px;
background-image:url('http://www.google.com/favicon.ico');
background-size:cover;
background-repeat: no-repeat;
background-position: 50% 50%;
}
.inner2
{
float:left;
height:80px;
padding-left:10px;
vertical-align:middle;
}
.innerText
{
}
</style>
</header>
<body>
<div class="outer">
<div class="inner1"></div>
<div class="inner2">
<div class="innerText">This text</div>
<div class="innerText">Should be centered</div>
</div>
</div>
</body>
</html>