3

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>

jsフィドル

テンプレートもオンラインで

4

1 に答える 1

4

テキストに適用vertical-align: middleすると、css は、直感的にそうすべきだと思っていることを実際には実行しません。これは、テキストが使用可能なすべてのスペースの中央に配置されているためですが、使用可能なスペースはテキストの正確な高さだけであるため、テキストは移動しません (テキストの垂直方向のセンタリングについて詳しくは、こちらを参照してください)。

あなたがしなければならないことは、テキストが必要とするよりも多くの利用可能なスペースを割り当てて、その中央に配置できるようにすることです. これを行うには、 のline-heightに等しいテキストに a を追加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>

ここにデモがあります：

jsフィドル

次のようになります。

デモ

于 2013-11-12T15:35:38.857 に答える