1

高さ 114px、幅 100% (ページ幅) の外部 DIV を設定しようとしています。その中に、左、中央、右に 3 つの DIV が必要です。これらの内側の 3 つの div の高さは異なります。3 つの内部 DIV すべてを上から下に中央揃え (垂直方向に揃える) にしたいと考えています。

左と右または左: 0 と右: 0 のフローティングに近づきましたが、垂直方向の中央部分に引っかかっています。左右の DIV には、画像の中央にテキストのみが含まれます。画像をjsfiddleに表示するのに苦労しているため、多くの例を提供できません。申し訳ありません。

上下に配置された例を見つけましたが、運が中心にありません。

ありがとう！

編集：

TyBlitz、あなたは私を正しい方向に向けました。ありがとう！ただし、コンテナの div の高さ - 内側の div の高さでは、2 で割る必要があります。例:

114-50=64 then divide by 2 = 32 for top.

また、text-align (左/中央/右) をいじる必要がありました。すべての内部 DIV を 33% にすることにわくわくしていませんが、機能します。スケーラブルな幅を持っていても、正しく配置できるはずです。ここに、サンプル画像が埋め込まれた私のフィドルがあります：私のフィドル

4

3 に答える 3

1

これで問題は解決すると思いますが、3 つのラッパー div を作成する必要があります。

HTML

<div class="outer">
    <div class="leftDiv">
        <div class="leftInnerDiv">Left Div</div>
    </div>
    <div class="rightDiv">
        <div class="rightInnerDiv">Right Div</div>
    </div>
    <div class="centerDiv">
        <div class="centerInnerDiv">Center Div</div>
    </div>
</div>

CSS

.outer,
.leftDiv,
.rightDiv,
.centerDiv{
    height: 114px;
}

.leftDiv{
    float: left;
}
.rightDiv{
    float: right;
}
.centerDiv{
    overflow: hidden;
}

.leftDiv:before,
.rightDiv:before,
.centerDiv:before{
    content: "";
    display: inline-block;
    vertical-align: middle;
    height: 100%;
}

.leftInnerDiv,
.rightInnerDiv,
.centerInnerDiv{
    vertical-align: middle;
    display: inline-block;
}

.leftInnerDiv{
    background-color: red;
}
.rightInnerDiv{
    background-color: green;
}
.centerInnerDiv{
    background-color: blue;
}

jsfiddle リンク: http://jsfiddle.net/pv6yJ/1/

ただし、次のことに注意してください。

  • 右側の div は、html の中央の div の前に宣言されています。
  • 私のソリューション (css vertical align) は、IE7 以下では機能しません。
于 2013-09-10T16:07:22.120 に答える
0

この例を作成して、コンテナーを垂直方向に整列し、3 つの div を 3 つの等しい列に自動的にレイアウトする列数 (css3) を使用する方法を示しました。

-moz-column-count: 1;
-webkit-column-count: 3;
column-count: 3;

サポートされていないブラウザー (IE) の場合は、幅を 33% に設定し、左にフロートすることができます。

http://codepen.io/tom-maton/pen/oqsEJ

お役に立てれば

于 2013-09-11T11:15:03.057 に答える