Left-align image and centered text on same level inside of a div?

Question

HTML:
<br />
    <div class="UpperTitle">
        <img src="Images/CableSolve Logo.jpg" align="absmiddle" padding-right: 10px;" /> CableSolve Web Dashboard - Version 0.1.1
    </div>
<br />

CSS:
.UpperTitle
{
    text-align: center;
    padding-top: 20px;
    padding-bottom: 20px;
    background-color: #CEDEF4;
    font-weight:bold;
    color: #224499;
    border-radius: 10px;
}

I have this setup currently. I would like to position the banner on the same level as the text, but I would like to have the banner on the left-hand side of the screen with the text in the center of the screen.

It seems like my only options are either: floating the image (would need a ton of hard-coded values to make this look OK), wrapping the text in a <div> to center it specifically (which causes it to drop below the image), or centering both the image and the text -- which is what I do currently.

I found a lot of various guides on this, but they seem to either float the image using a simple website layout, or vertically align the text, or find the center banner/text combo acceptable.

Thoughts?

Thanks in advance.

Solution

Why not just exploit CSS position? like this.

Cheers

Comments

[Sean Anderson]

I liked this one. :) Nice, simple and I understood exactly what was going on. Thanks! Nothing against Snippet's answer, I'm sure they both work relatively identically.