Ärger machen Bilder und Titel align horizontal

Question

Html HIER ---

<div id="uktvHeader"> 
<nobr> 
    <img id="uktvLogo" src="images/uktv_logo.jpg"> 
    <h3 id="uktvTitle"> UKTV Promo Campaigns Final Workflow </h3> 
    <img id="farmLogo" src="images/Trans_Logo.png" alt="Farm Logo"> 
</nobr> 
</div> 

CSS HIER ---

#uktvHeader{ 
    height: 70px; 
    vertical-align: middle; 
    max-width: 650px; 


} 
    #uktvLogo { 
    float: left; 
    width: 100px; 


} 
    #farmLogo { 
    float: right; 
    margin-top: -70px; 
    width: 100px; 

} 
    #uktvTitle { 
    overflow: hidden; 
    line-height: 50px; 

Das Bild ist, wie es jetzt aussieht, und ich bin damit einverstanden, dass aber Ich dachte, es muss einen besseren Weg geben, um das erste Bild, den Titel und das letzte Bild horizontal auszurichten.

Momentan wende ich einen negativen px-Wert an den Rand oben auf dem letzten Bild an, das mir wackelig erscheint. Wenn ich das nicht mache, dann befindet sich das Bild 'Farmgruppe' direkt unter dem ersten Bild und h3-Text. Ich hätte gerne eine elegantere Art, diese Gegenstände auszurichten.

Jeder Rat würde sehr geschätzt werden!

Answer 1

nobr > * { 
    display:inline-block; 
    vertical-align:middle; 
} 

Das sollte es tun. CSS ist selbsterklärend.

Beispiel: https://jsfiddle.net/27q0nLo8/2/