8

現在、ウェブサイトをテーブル レイアウトから CSS に再設計しています。非常に単純な作業のように見えたものにいくつか問題があります。

サイトはシンプルです。複数のリンクを含む画面中央のボックス。

古いサイト<td valign="center">では、ボックス内のすべてのリンクが中央に配置されていました。CSSには同等のものはないようです。次のように、負のマージンを使用して要素を中央に配置しています。 

div {
    height: 200px;
    position: absolute;
    top: 50%;
    margin-top: -100px;
}

これは、中央に配置する要素の大きさが正確にわかっている場合はうまく機能しますが、リンクが占める垂直方向のサイズを知らなくても、リンクを中央に配置できるようにする必要があります。ボックス内の位置合わせが のように機能するようにしたいだけですtext-align: center。こちらも縦のみ。

表でデザインされた現在の Web サイト
CSS バージョンの現在の進行状況

4

2 に答える 2

6

元のCSSと高さを設定するjsの組み合わせであるため、4つ、おそらく5つのソリューションが下部に追加されています。

  • 表のセルを使用して、コンテンツを垂直方向に中央揃えにします
  • display: table-cell; vertical-align: middle;div の css として使用する
  • javascript で div の高さが変わるたびに margin-top を更新する
  • css3 flexbox を使用します (一部の古いブラウザーでは機能しないため、ベンダー固有の拡張機能を使用する必要があります)

古いスタイルの flexbox を使用した簡単な例 - クロム バージョン - ラッパー div を追加し、スタイルを次のように設定します。

#wrapper { display: -webkit-box; -webkit-box-align: center; }
#wrapper > div { margin: auto; }

このhttp://jsfiddle.net/gK7YU/のフィドル

新しいスタイルのフレックスボックス - これもクロム バージョンです。他のベンダー プレフィックスと、最終製品でプレフィックスのないバージョンを追加する必要があります。

#wrapper { display: -webkit-flex; }
#wrapper > div { margin: auto; }

これをフィドル：http://jsfiddle.net/LeHRD/

フィドルにはさらにいくつかの css プロパティが含まれているため、何が起こっているかを簡単に確認できます。

ああ、申し訳ありませんが、ラッパー div は必要ありません。フレックスボックスを使用してコンテンツを垂直方向に中央揃えすることができますdisplay: table-cell;。

高さを指定して絶対配置を使用することもできます jsfiddle.net/N28AU/1

#wrapper { possition:relative }
#wrapper > div { position:absolute;top:0;right:0;bottom:0;left:0;margin: auto;}

含まれている要素から高さを計算し、負のマージンを避けたい場合は js を介して更新できます。

于 2012-10-09T02:20:22.427 に答える
4

私はあなたのウェブサイトに行って、ここに html をコピーしました。

あなたはこれを行うことができます：

<style>
#box{
    display: table;
}
#box > div {
    display: table-cell;
    vertical-align: middle;
}
</style>

<!-- Your html part -->
<div id="box">
    <div>
        <a href="#">Link A</a>
        <a href="#">Link B</a>
        <a href="#">Link C</a>
        <a href="#">Link D</a>
    </div>
</div>

に設定されているラッパー要素がない場合、プロパティが正しく機能しないため、div要素を内部でラップする必要があります。#boxdisplay: table-celldisplay: table

あなたの例: jsfiddle

于 2012-10-09T02:29:47.480 に答える