作为页面标题的图像不与标题按钮垂直对齐

Question

在jQuery Mobile页面中，我需要一个标题为＆＃34; back＆＃34;按钮，居中图像作为页面标题，右按钮指定为方形图像。 两张图片都有相同的高度。

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

<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

但似乎标题中的三个元素没有正确对齐。

这是我想要达到的垂直对齐方式：

非常感谢！

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 Mobile样式一起使用，您必须覆盖一些默认规则。左右按钮被设置为绝对位置，因此我们可以使用css transform使它们始终垂直中间对齐（适用于任何/未知高度）。请参阅以下演示。

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

小提琴演示： http://jsfiddle.net/nzd31v9o/

Answer 2

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

<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