3

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

我所指的区域在州标志旁边有“爱荷华州评估员”字样。

这可能吗？

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

网上也有模板

4

1 回答 1

4

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

您需要做的是分配比文本需要更多的可用空间，以便可以将其定位在文本的中心。为此，请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

应该是这样的：

演示

于 2013-11-12T15:35:38.857 回答