jQuery移动图像以标题为中心，具有“默认”大小

Question

看到这个小提琴：http://jsfiddle.net/pmjtf/

我正在尝试将徽标图像立即放在标题“文本”的左侧。

我还希望图像的大小与默认的标题文本相同，我认为是〜16px。更准确地说，由于图像较大，我不希望标题栏调整大小，我希望图像缩小。

我已经能够使用height标签强制调整大小，但无法获得中心对齐。

<div data-role="page">
        <div data-role="header" data-position="inline">
              <img src="example.png"> <h1>test</h1>
            </div>
    </div>

Answer 1

最好的办法是将您的图片放在<h1>内并将其大小设置为1em，这会使其自动缩放到文字大小。

<div data-role="page">
  <div data-role="header" data-position="inline">
    <h1>
      <img src="example.png" style="height: 1em" />
      test
    </h1>
  </div>
</div>