在jQuery Mobile标题中对齐图像和文本

Question

我遇到了一个问题，即在jQuery Mobile的“标题”部分中将图像与文本对齐。我能够成功地放入CSS，使我能够使图像居中。但是，在图像源中应用任何类型的“对齐”标记都不会产生我正在寻找的结果。

我所指的地区在州徽标旁边有“Iowa Assessors”字样。

这可能吗？

HTML ：

<div data-role="header" data-position="fixed" data-theme="a">
    <div class="center-wrapper">
        <img width="35" height="40" alt="Header" 
             src="http://i.imgur.com/UQ1QWhH.png" />
        IOWA ASSESSORS
    </div>
</div>

jsFiddle

Template online以及

Answer 1

当你将vertical-align: middle应用于文本时，css并没有真正做到你直觉认为它应该做的事情。这是因为文本与所有可用空间的中间对齐，但唯一可用的空间是文本的确切高度，因此它不会移动（请阅读有关vertically centering text的更多信息）。

您需要做的是分配比文本需要更多的可用空间，以便将其放置在其中心。为此，请将line-height添加到与height中的img相等的文字。

---

将文字换成一个范围，以便对其进行样式设置，并添加以下 CSS ：

.center-wrapper span {
    vertical-align: middle;
    line-height: 30px;
}
.center-wrapper img {
    vertical-align: middle;
}

您的 HTML 应如下所示：

<div data-role="header" data-position="fixed" data-theme="a">
    <div class="center-wrapper">
        <img width="35" height="40" alt="Header"
             src="http://i.imgur.com/UQ1QWhH.png" /> 
        <span>IOWA ASSESSORS</span>
    </div>
</div>

---

这是一个演示：

jsFiddle

这应该是这样的：