html - display: table-cell を持つ CSS のサイズ変更 div

Question

サイトにヘッダーがあり、これにはコンテナーと 3 つの div があります。

ヘッダー コンテナーの高さは 100px です。最初の div は左にフロートし、幅は 150px です。2 番目の div は右にフロートし、幅は 150px です。

3 番目の div を垂直方向の中央に配置します。display: table-cell と vertical-align: middle を追加すると、div がテキストのサイズに縮小されます。固定サイズを使用してのみ div のサイズを変更できます。

<div id="#headingcontainer">
<div class="leftimg">Left</div>
<div class="rightimg">Right</div>
<div class="heading">Content to be centered horizontally and vertically</div>
</div>

#headingcontainer
{
border: none;
border-bottom: 2px solid #8c8cd4;
width: 100%;
height: 100px;
text-align: center;
background-color: #000;
margin-bottom: 10px;
margin-left: auto;
margin-right: auto;
}

div.heading
{
display: table-cell;
vertical-align: middle;
height: 100px;
text-align: center;
width: auto;
}


div.leftimg
{
width: 150px;
float: left;
}

div.rightimg
{
width: 150px;
float: right;
}

正確な幅を知らなくても中央のdivを中央に配置する方法を誰か教えてもらえますか?

見出しクラスから display: table-cell を取り出すと、垂直方向の中央揃えではなく、水平方向の中央揃えになります。

Answer 1

私は今、自分に合った答えを見つけました。

まず、HTMLに小さな変更を加えます（見出しに2つの追加のdiv）：

<div id="#headingcontainer">
    <div class="leftimg">Left</div>
    <div class="rightimg">Right</div>
    <div class="heading"><div><div>Content to be centered horizontally and vertically<div></div></div>
</div>

次に、CSSに変更します。

#headingcontainer
{
    border: none;
    border-bottom: 2px solid #8c8cd4;
    background-color: #000;
    margin-bottom: 10px;
    width: 100%;
    height: 100px;
}

div.heading
{
    display: table;
    border-collapse: collapse;
    width: 100%;
    height: 100px;
    position: absolute;
}

div.heading div
{   
    display: table-row;
}

div.heading div div
{   
    display: table-cell;
    text-align: center; 
    vertical-align: middle;
}

これにより、テキストを含む最終divを、垂直方向と水平方向の両方の中央に配置できます。ヘルプは、さらに検索した後に見つけた別のStackOverflowの質問から来ました-818725。

Answer 2

これはあなたが探しているものかもしれないと思います... cssのdiv.headerを変更して上部にパディングを付け、テーブルセルを削除し、幅の自動ではなくマージンを自動に設定しました。これがあなたが望んでいたものかどうかを確認してください。間隔に応じて上部のパディングを調整する必要がありますが、これが私にとって最も簡単な方法のようです。

#headingcontainer
{
border: none;
border-bottom: 2px solid #8c8cd4;
width: 100%;
height: 100px;
text-align: center;
background-color: #000;
margin-bottom: 10px;
margin-left: auto;
margin-right: auto;
}

div.heading
{
height: 100px;
text-align: center;
margin: auto;
padding-top:40px;
}


div.leftimg
{
width: 150px;
float: left;
}

div.rightimg
{
width: 150px;
float: right;
}

<div id="headingcontainer">
<div class="leftimg">Left</div>
<div class="rightimg">Right</div>
<div class="heading">Content to be centered horizontally and vertically</div>
</div>

Answer 3

これを試してくださいhttp://jsfiddle.net/KtgVN/20/