28

さまざまなサイズのテキストを垂直方向に揃えようとしていますが、Firefox は小さいテキストを中央より上に表示します。

CSS:

div.categoryLinks {
    margin: 1em 16px;
    padding: 0 4px;
    border-width: 1px 0;
    border-style: solid;
    border-color: #ece754;
    background: #f7f5b7;
    color: #a49f1c;
    text-align: center;
    font-size: 1.4em;
}
div.categoryLinks em {
    font-size: 0.6em;
    font-style: normal;
    vertical-align: middle;
}

HTML:

<div class="categoryLinks">
    <em>SECTION:</em>
    Page One &#183;
    Page Two &#183;
    <a href="link">Page Three</a>
</div>

スクリーンショット: (出典: doheth.co.uk )スクリーンショット

更新：明確にするために、私は多かれ少なかれどのようにvertical-align機能するかを知っています。つまり、よくある誤解をすでに知っています。

さらに調査したところ、この問題を修正する最も簡単な方法は、大きなテキストを で囲み、その上spanに設定vertical-alignすることだと思われます。thenの 2 つの子は.categoryLinks、互いに相対的に位置合わせされます。誰かが追加のマークアップなしでより良い方法を示すことができない限り?

4

5 に答える 5

17

垂直方向の配置は、テーブルのセルまたはdisplay: inline-block要素で期待どおりにのみ機能します。詳細については、「vertical-alignについて」または「コンテンツを垂直方向に中央揃えにする方法（しない方法）」をお読みになることをお勧めします。

編集： Firefoxと同じように機能するので、何か他のことが起こっています。SECTION：のフォントサイズを真下に落としても、中央に配置されています。Firebugを使用して、他のCSSがFirebugに影響を与えているかどうかを確認しましたか？

これはそのまま機能します。

<html>
<head>
<style type="text/css">
div.categoryLinks {
        margin: 1em 16px;
        padding: 0 4px;
        border-width: 1px 0;
        border-style: solid;
        border-color: #ece754;
        background: #f7f5b7;
        color: #a49f1c;
        text-align: center;
        font-size: 1.4em;
}
div.categoryLinks em {
        font-size: 0.4em;
        font-style: normal;
        vertical-align: middle;
}
</style>
</head>
<body>
<div class="categoryLinks">
        <em>SECTION:</em>
        Page One &#183;
        Page Two &#183;
        <a href="link">Page Three</a>
</div>
</body>

注：ポイントを強調するために、セクションのフォントサイズが元の0.6emから0.4emに変更されました。

于 2009-04-08T22:33:57.317 に答える
2

垂直方向の整列は、インラインブロック要素にのみ適用されることになっています（デフォルトでこのレイアウトプロパティを持つのは画像だけだと思います）。したがって、これを使用してインライン要素を配置するには、最初にインラインブロックに変換してから、次のことができます。マージンとパディングを使用して、通常のブロック要素をどのように配置するかと同じように配置します。

div.categoryLinks {
        margin: 1em 16px;
        padding: 0 4px;
        border-width: 1px 0;
        border-style: solid;
        border-color: #ece754;
        background: #f7f5b7;
        color: #a49f1c;
        text-align: center;
        font-size: 1.4em;

}
div.categoryLinks em {
            font-size: 0.6em;

           display:inline-block;
        vertical-align:top;
        font-style: normal;
        padding: 2px 0 0 0;

}

ただし、 Firefox 2の場合は少し調整する必要がありますが、これはFirefoxがWeb標準をサポートしていないという珍しい例が原因です。一方で、まだffx2を使用している人はほとんどいないため、微調整を気にすることはできません。これは非常に小さな設計上の欠陥にすぎません。

于 2009-04-08T22:33:37.910 に答える
2

Firefox は正しくレンダリングされています。vertical-align プロパティはインラインです。つまり、<div> (および <p> など) のようなブロック要素には適用されません。display: inlineを追加してみて、それが機能するかどうかを確認してください。

于 2009-04-08T22:32:22.937 に答える
1

削除するだけでこの問題を修正しました：

 white-space: nowrap;

親divから。理由はわかりませんが、このルールを追加すると、Firefox は以下を適用しません:

vertical-align: middle;
于 2014-04-10T15:40:48.643 に答える
0

私も同じ問題を抱えていました。これは私のために働く：

 <style type="text/css">
    div.parent {
         position: relative;
    }

    /*vertical middle and horizontal center align*/
    img.child {
        bottom: 0;
        left: 0;
        margin: auto;
        position: absolute;
        right: 0;
        top: 0;
    }
    </style>

    <div class="parent">
        <img class="child"> 
    </div>
于 2013-01-26T19:45:34.490 に答える