javascript - ヘッダーボタンの中央のテキスト

Question

私はこのようなものを持っています：

記号と同じ高さのテキストを作成するにはどうすればよいですか？

ログアウトとお気に入りは「X」ボタンの横にある必要があります。

いくつかのコード：

HTML：

<div  data-role="page" data-hash="false" id="companyPage" >
        <div data-role="header" data-position="fixed" data-theme="a">
            <h1>&nbsp;</h1>
            <a onclick="logout()"  data-role="button"  data-transition="none" data-icon="delete">Logout</a>
            <a id="favpage"  onclick="getfav()" data-role="button" data-transition="none" data-icon="star">Fav</a>
        </div>
        <!-- /header -->

        <div data-role="content">
            <ul data-transition="none" data-role="listview" data-filter="true" id="companies" data-inset="true" data-filter-placeholder="Search Company..." data-split-icon="gear" data-split-theme="d" data-filter-theme="d" data-divider-theme="b">
            </ul>
        </div>
        <!-- /content -->
</div>

CSS：

.ui-header .ui-btn-inner  { font-size: 14px;  height:35px; padding: .6em 10px; min-width: .75em; }

Answer 1

ボタンの高さに一致するようにテキストの行の高さを変更できます。

ボタンの高さが30ピクセルで、テキストがa要素内にある場合、CSSは次のようになります。

a {
    height: 30px;
    line-height: 30px;
    display: block;
}

Answer 2

これがボタンのcssである場合、次のようになります。

.ui-header .ui-btn-inner  { 
        font-size: 14px;  
        height:35px; 
        padding: .6em 10px; /* here .6em = 12px */
        line-height:47px;
        min-width: .75em; 
}

だからあなたはline-heightこれに価値を適用することができます：12px+heightそれは47px

Answer 3

私が理解したように、あなたのアイコンはボタンの高さを定義しています。trueの場合、テキストの高さをアイコンと同じになるように定義してから、vertical-alignを中央に設定する必要があります。