0

これが私が話していることの例です。問題を確認するにはズームインする必要があります http://jsfiddle.net/54NEa/

<div id="top">SomeText</div>
<div id="middle">SomeText</div>
<div id="bottom">SomeText</div>

div{
    display: inline-block;
    background-color: red;
    font-family: Lucida Sans Unicode,Verdana,Arial,Helvetica,sans-serif;
    font-size: 10px;
    line-height: 10px;
}
div.top {vertical-align:top;}
div.middle {vertical-align:middle;}
div.bottom {vertical-align:bottom}

行は10pxですが、テキストが完全に塗りつぶされていないため、余分なパディングがあります。FFではパディングが下にあり、Chromeではvertical-alignプロパティに関係なく上にあります。これはフォントによって多少異なりますが、実際には行の高さを完全に埋めることはなく、「揺れ」ます。ブラウザに関係なく、そのフォントをその行に対して1つの位置に固定する方法はありますか？小さなcssボタンを作成していますが、線の高さが正確に10ピクセルで、テキストの高さが正確に10ピクセルであることを確認する必要があるため、常に同じように見えます。

4

3 に答える 3

1

要素に合わせて行の高さを調整する必要があります。

HTML:

    <div id="top"><span>SomeText</span></div>

div{
    height:30px;
    display: inline-block;
    background-color: red;
    font: 10px Lucida Sans Unicode,Verdana,Arial,Helvetica,sans-serif;
}

span{
    line-height:30px;
}

ここにフィドルがあります： http://jsfiddle.net/54NEa/1/

于 2013-01-18T19:32:08.560 に答える
0

vertical-alignインライン要素にのみ適用されます。spana の代わりに aを使用するdivか、div に設定display:inlineしてみてください。

編集

コンテナのfont-sizeandも設定する必要があります。line-height今回は本体を使用しました。inlineも必要ないようなので、表示を に変更し、inline-block単位なしを使用しました。line-height

http://jsfiddle.net/78fxj/

于 2013-01-18T19:32:19.497 に答える
0

div の表示を table-cell に設定することもできます。これは非常に優れたソリューションですが、場合によっては別の意味を持つこともあります。

<div id="top">SomeText</div>
<div id="middle">SomeText</div>
<div id="bottom">SomeText</div>

div{
    display: **table-cell**;
    background-color: red;
    font: 10px/10px Lucida Sans Unicode,Verdana,Arial,Helvetica,sans-serif;
}
div.top {vertical-align:top;}
div.middle {vertical-align:middle;}
div.bottom {vertical-align:bottom}
于 2013-01-18T19:35:23.200 に答える