将文本置于两个图像之间

在我的 HTML5 文档中，我想在页面的最左边和最右边显示一个图像，然后在它们之间居中放置我的文本。我一辈子都无法让语法正确。我一直在寻找大量的答案，但我错过了一些东西。

我的右侧图像放置在下一个“行”上，因此文本未正确居中。

在我的index.html 中我这样写：

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

对于我的CSS我有这个：

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

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

.floatLeft { float: left; }

.floatRight { float: right; }

您需要将两个图像放在“h1”元素之前

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

它有效，这里是jsFiddle http://jsfiddle.net/t8c6s/

解释：如果您将 div （或 h1 或任何块元素）放在两个浮动元素之间，则与您在它们之间执行的clear:both 相同，因此它们永远不会出现在同一水平级别中。

另外，这里离题了，但是如果您使用 alt="" 属性，由于可访问性问题，如果您没有任何合理或描述性的内容可写，最好将其留空（但仍保留属性），这样像这样 alt="" 就可以了！盲人的屏幕阅读器将跳过该图像，因为它与他无关，而不是打扰他阅读“徽标图形”......谁在乎呢？如果您根本不添加 alt 属性，那么它将读取图像名称，因此如果不需要更多描述性内容，则 alt="" 非常有用。