作为页面标题的图片未与 header 按钮垂直对齐

Question

在 jQuery 移动页面中，我需要一个带有 "back" 按钮的 header，一个作为页面标题的居中图像和一个被认为是方形图像的右侧按钮。两张图片的高度相同。

我可能设法通过以下代码得到了我想要的东西：

<div data-role="page">
    <div data-role="header">
        <a class="ui-btn ui-icon-arrow-l ui-btn-icon-notext"></a>
        <img src="http://placehold.it/120x35/096/fff.png" class="ui-title"/>
        <img src="http://placehold.it/35x35/096/fff.png" class="ui-btn-right"/>
    </div>
</div>

Live jsfiddle demo

但 header 中的三个元素似乎没有正确垂直对齐。

这是我想要实现的垂直对齐方式：

非常感谢！

Answer 1

垂直对齐元素，使用起来非常简单inline-block。

a, img {
    display: inline-block;
    vertical-align: middle;
}

a {
    width: 15px;
    height: 15px;
    background: red;
}

<div data-role="page">
    <div data-role="header">
        <a class="ui-btn ui-icon-arrow-l ui-btn-icon-notext"></a>
        <img src="http://placehold.it/120x35/096/fff.png" class="ui-title"/>
        <img src="http://placehold.it/35x35/096/fff.png" class="ui-btn-right"/>
    </div>
</div>

要使其与 jQuery 移动样式一起使用，您必须覆盖一些默认规则。左右按钮被设置为绝对位置，因此我们可以使用 css transform 使它们始终垂直居中对齐 （适用于 any/unknown 高度）。演示如下

.ui-title {
    display: inline-block !important;
    vertical-align: middle !important;
}
.ui-btn-left,
.ui-btn-right {
    top: 50% !important;
    transform: translateY(-50%) !important;
}

Fiddle 演示： http://jsfiddle.net/nzd31v9o/

Answer 2

一种解决方案是将ui-title class添加到右侧按钮，然后对于后退按钮，只需设置顶部位置和高度即可：

<div data-role="page">
    <div data-role="header">
        <a class="ui-btn ui-icon-arrow-l ui-btn-icon-notext "></a>
        <img src="http://placehold.it/120x35/096/fff.png" class="ui-title"/>
        <img src="http://placehold.it/35x35/096/fff.png" class="ui-btn-right ui-title" />
    </div>
</div>

.ui-btn-left {
    top: 0.7em !important;
    height: 35px;
}

DEMO

如果您希望后退按钮更小并居中：

.ui-btn-left {
    top: 0.7em !important;
    margin-top: 2.5px !important;    
}

DEMO 2

作为页面标题的图片未与 header 按钮垂直对齐

Image as page title does not align vertically with header buttons

css

jquery-mobile