无法使图像和标题水平对齐

Question

Html HERE ---

<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在这里---

#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;

图像是它现在的样子，我对此感觉还可以，但我认为必须有一种更好的方法来水平对齐第一个图像，标题和最后一个图像。

目前我正在将最后一张图像上的负px值应用于margin-top，这对我来说似乎不太好。如果我不这样做，那么该农场小组＆＃39;图像位于第一个图像和h3文本的正下方。我希望有一种更优雅的方式来调整这些项目。

非常感谢任何建议！

Answer 1

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

应该这样做。 CSS是不言自明的。

示例：https://jsfiddle.net/27q0nLo8/2/