1

私はこれを数時間戦ってきました。このスパンのテキストは不思議なことに、スパンの上部に配置されています。Firebug のスクリーンショットを次に示します。

ここに画像の説明を入力

そして、ここに私の関連するCSSブロックがあります:

.skills {
    overflow:hidden;
    height:100%;
}


.skills li{
    border-bottom:1px dotted black;
    position:relative;
    width:200px;
    height:18px;
    margin-left:13px;
}

.skills li span{
    display:inline-block;
    position:relative;
    background:white;
    bottom:0px;
    height:100%;
    padding:0 5px; 
}

HTMLは次のとおりです。

<h4 class="main-heading"><span>Data Exchange</span></h4>
<ul class="skills">
    <li>
        <span>SOAP/Axis2</h4>
    </li>
</ul>

これが上に並んでいる理由がわかりますか？真ん中にしたい。

そして、これがjsFiddle です。同じコードを使用すると、テキストが中央に配置されます。それは、階層の上位にある CSS 要素が原因である可能性があるということですか?

4

4 に答える 4

2

...同じコードを使用すると、テキストが中央に配置されます。それは、階層の上位にある CSS 要素が原因である可能性があるということですか?

実際のスタイルシートの先祖はline-height18px 未満に設定されていると思います。実際のスタイルシートでその要素の計算された行の高さを見て、適用された値を確認できます。

のデフォルト値line-height はおよそ 1.2xです (ブラウザによって異なります)。

line-heightを含む要素のパディングされていない高さと等しくなるように設定して、1 行のテキストを垂直方向に揃えます (この場合は 18px)。

フィドルの例: http://jsfiddle.net/4vq42/

于 2013-03-23T04:01:58.023 に答える
1

行の高さはありません。18px または 100% のいずれかで、高さと同じにします。

.skills li span{
    display:inline-block;
    position:relative;
    background:white;
    bottom:0px;
    height:100%;
    line-height:18px;
    padding:0 5px; 
}
于 2013-03-23T03:57:31.190 に答える
1

CSSに追加line-height: 18pxしてみてください。.skills li span

編集：Tim Medoraがすでにこれを言っていることに気づきました。私を無視。

于 2013-03-23T03:58:20.410 に答える
1

line-height要素の値に設定することheightは、テキストを垂直方向に揃える最も簡単な方法です。

.skills li {
    height:18px;
    line-height:18px;
}
于 2013-03-23T03:59:07.580 に答える