-1

この単純な垂直方向の配置が機能しないので、脳の機能不全に陥ったに違いありません。コードは次のとおりです。

CSS

div#topHolder {
    background: #000000;
    width: 100%;
    height: 200px;
    line-height: 200px;
    text-align: center;
    border: 1px solid #0000ff;
}

img#title {
    vertical-align: middle;
    border: 1px solid #ffff00;
}

HTML

<body>
    <form id="form1" runat="server">
    <div id="topHolder">
        <img id="title" src="images/file.gif" />
    </div>
    </form>
</body>

ご覧のとおり、画像は div の中央にあると思われますが、代わりに上部にあります。もちろん、アライメントの他の値は機能しません。大声で叫ぶために、私は何が欠けているのですか?!

4

2 に答える 2

2

この記事を読むことをお勧めします。垂直方向の配置が期待どおりに機能しない理由が説明されています。一般に、テーブル (またはテーブル スタイルを持つオブジェクト) とインライン オブジェクトでのみ機能します。これは、標準で定義されているとおりです。

http://phrogz.net/css/vertical-align/index.html

編集：

さらに興味深いのは、画像の両側にテキストを追加することです。

<div id="topHolder">
     xx <img id="title" src="images/file.gif" /> xx
</div>

その理由 (私が思うに) は、画像が通常のインライン要素ではなく、「置き換えられた」インライン要素であるため、動作が少し異なるためです。これが意味することは、置き換えられた要素には実際のコンテンツがないということです (それらはレンダリング時に「置き換えられます」が、レンダリング エンジンに関する限り、実際の img 自体は空です)。

（置換されたコンテンツではなく）実際のコンテンツを追加すると、垂直方向の配置が機能します。複数の要素を配置すると、機能します（2つの画像でも）

フィドルで機能する理由は、フィドルが内部で多くのことをいじり、コンテンツに奇妙な影響を与えることがあるためです。

これにはさまざまな回避策がありますが、それらはすべてハックが必要であり、不快に感じる可能性があります. マージンを計算して中央に配置した方がよい場合があります。

ところで、「幅: 100%」は冗長です。ブロック レベルの要素 (div など) はデフォルトで 100% です。

于 2012-07-20T16:37:20.457 に答える