web-dev-qa-db-ja.com

Firefoxで「vertical-align：middle」が中央に配置されない

サイズの異なるいくつかのテキストを垂直方向に揃えようとしていますが、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>

スクリーンショット： screenshot
（ソース： doheth.co.uk ）

[〜＃〜]更新[〜＃〜]：明確にするために、私はvertical-alignがどのように機能するかを多少知っていますつまり、私はすでに一般的な誤解を知っています。

さらに調査すると、この問題を解決する最も簡単な方法は、大きなテキストをspanで囲み、vertical-alignを設定することでもあるようです。次に、.categoryLinksの2つの子が互いに相対的に配置されます。誰かが余分なマークアップなしでより良い方法を示すことができない限り？

cssvertical-alignment
25
DisgruntledGoat

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

編集：Firefoxでそのまま動作するので、何か他のことが起こっています。 SECTIONのフォントサイズを下げても、中央に表示されたままです。 Firebugを使用して、他のCSSが影響しているものを確認しましたか？

これはそのまま動作します：

<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に変更しました。

16
cletus

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

2
user13876

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

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を使用している人はほとんどいないため、Tweakを気にする必要はありません。これは非常に小さな設計上の欠陥です。

2
wheresrhys

私はこの問題を単に削除して修正しました：

 white-space: nowrap;

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

vertical-align: middle;
1
robertovg

私も同じ問題を抱えていました。これは私にとってはうまくいきます：

 <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>
0
algreat