Center text between two images

Question

In my HTML5 document I want to display an image on the far left and right of the page, and then centered inbetween them have my text. I can't for the life of me get the syntax correct. I've been looking at tons of answers for this and but I'm missing something.

My right side image is placed on the next "line" and so the text isn't centered properly.

In my index.html I put this:

<header>
    <img class="logo floatLeft" alt="Logo"  />
    <h1 class="logoHeader">Text Here</h1>
    <img class="logo floatRight" alt="Logo" />
</header>

and for my CSS I have this:

.logo {
    width: 150px;
    height: 120px;
    content: url(logo.jpg);
}

.logoHeader {
    height: 120px;
    vertical-align: middle;
    text-align: center; 
}

.floatLeft { float: left; }

.floatRight { float: right; }

Answer 1

You need to put both images before ´h1´ element

<header>
    <img class="logo floatLeft" alt="Logo"  />
    <img class="logo floatRight" alt="Logo" />
    <h1 class="logoHeader">Text Here</h1>
</header>

It works, here is jsFiddle

EXPLANATION: If you put div (or h1 or any block element) between two floating elements, its the same as you did clear:both between them, so they will never appear in the same horizontal level.

Also, off-topic here, but if you are using alt="" attribute, due to accessibility issues, if you don't have anything reasonable or descriptive to write, better off leave it empty (but still to keep the attribute) so like this alt="" is fine! The screen reader of a blind person will then skip this image because it is irrelevant for him, instead of bothering him reading "logo graphics"..who cares?. If you don't put alt attribute at all, then it will read image name, so alt="" is great if nothing more descriptive is needed.