0

任意の幅/高さの要素を別の要素内および/またはブラウザ ウィンドウ内で (水平方向と垂直方向の両方で) 中央に配置したいと考えています。

理想的には、コンテンツをページ上の要素の中央に配置しようとしている場合でも、ブラウザ ウィンドウ自体の中央に配置しようとしている場合でも機能するソリューションが必要です。

他の質問が私がやろうとしていることのさまざまな側面に対処していることは理解していますが、これまで読んだ回答は私にとって満足のいくものではありませんでした.

次のようなソリューションを探しています。

  • 純粋に HTML + CSS を使用します(いくつかの JS ソリューションが表示されます)

  • テーブル(または「display: table」などのプロパティを持つ div) を使用しない

  • 中央の要素の高さを固定することに依存していません(いくつかの解決策は固定高さ + 負の上マージンで機能することがわかります)

  • 別の div内またはブラウザー ウィンドウ全体内で要素を中央に配置するために機能します。

4

1 に答える 1

0

私は長い間 Web を検索し、自分でこれを試しました。最後に、ここに記載されている解決策に出くわしました。

http://css-tricks.com/centering-in-the-unknown/

...これは、非セマンティック マークアップを回避するために、疑似クラス:beforeで作成されたvertical-align: middleと "ghost element" (vertical-align が機能するために必要) を使用します。

HTML:

<div class="wrapper">
    <div class="centered">
        This div will be centered.
    </div>
</div>

CSS:

.wrapper {
    width: 100%;
    height: 100%;
    text-align: center;
}

.wrapper:before {
    content: '';
    display: inline-block;
    width: 0px;
    height: 100%;
    vertical-align: middle;
}

.centered {
    display: inline-block;
    vertical-align: middle;
    width: 650px;
}

上記をブラウザ ウィンドウ全体の中央に配置するには、次の CSS が必要です。

html {
    height: 100%;
}

body {
    height: 100%;
    margin: 0px;
    padding: 0px;
}

ノート：

  • このソリューションは-IE7では機能しません
  • 元のソリューションでは、ゴースト要素でwidth: 1pxとmargin-right: -0.25emを採用しています。width: 0pxに置き換えました
于 2013-03-28T02:11:26.077 に答える