web-dev-qa-db-ja.com

Divテーブルセルの垂直方向の整列が機能しない

DIVを使用してテキストを水平方向および垂直方向に単純に中央に配置し、表セルとして表示タイプを使用しようとしていますが、IE8またはFirefoxで機能していません。

以下は私が使用しているCSSであり、htmlページにあるのはそれだけです。

@charset "utf-8";
/* CSS Document */
html, body
{
    background-color:#FFFFFF;
    font-family:Arial, Helvetica, sans-serif;
    margin: 0;
    padding: 0;
    padding-top: 5px;
}
div.Main
{
    background-color:#FFFFFF;
    border-collapse:collapse;
    width:800px;
    margin-left:auto;
    margin-right:auto;
}
div.MainHeader
{
    color:#C00000;
    font-size:18pt;
    font-weight:bold;
    text-align:center;
    width:800px;
}
div.BlackBox
{
    background-color:#000000;
    color:#FFFF00;
    display:table-cell;
    float:left;
    font-size:18pt;
    font-weight:bold;
    height:191px;
    text-align:center;
    vertical-align:middle;
    width:630px;
}
div.BlackBoxPicture
{
    background-color:#000000;
    float:right;
    height:191px;
    margin-top:auto;
    margin-bottom:auto;
    text-align:right;
    vertical-align:bottom;
    width:170px;
}

私は何を間違えていますか？

csshtmlalignment
55
mattgcon

table-cellには親display:table要素が必要だと思います。

43
meder omuraliev

これは私がそれを行う方法です：

CSS：

html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    display: table
}
#content {
    display: table-cell;
    text-align: center;
    vertical-align: middle
}

HTML：

<div id="content">
    Content goes here
</div>

見る

垂直センタリングの例

そして

CSS：中央揃え 。

40
Shaquin

あなたはcanIE 6+で動作するようにフロートされた要素を垂直に整列させることができます。完全なテーブルマークアップも必要ありません。このメソッドは完全にきれいではありません-ラッパーが含まれており、注意すべきことがいくつかあります。コンテナからあふれるテキストが多すぎる場合-しかし、それはかなり良いです。

短い答え：display: table-cellを要素に適用するだけですinsidefloated element （テーブルのセルはフロートしません）、古いIEの場合はposition: absoluteおよびtopでフォールバックを使用します。

長答：ここに jsfiddleの基本を示す があります。重要なものの要約（.old-ieクラスを追加する条件付きコメント付き）：

    .wrap {
        float: left;
        height: 100px; /* any fixed amount */
    }
    .wrap2 {
        height: inherit;
    }
    .content {
        display: table-cell;
        height: inherit;
        vertical-align: middle;
    }

    .old-ie .wrap{
        position: relative;
    }
    .old-ie .wrap2 {
        position: absolute;
        top: 50%;
    }
    .old-ie .content {
        position: relative;
        top: -50%;
        display: block;
    }

以下は jsfiddleが意図的に軽微な障害を強調している このメソッドでの例です。方法に注意してください：

  • 標準ブラウザでは、ラッパー要素の高さを超えるコンテンツは中央に配置されなくなり、ページを下に移動し始めます。これは大きな問題ではなく（おそらくページを忍び寄るよりも見た目が良い）、大きすぎるコンテンツを避けることで回避できます（何かを見落としていなければ、overflow: auto;などのオーバーフローメソッドはしないでください。動作するようです）
  • 古いIEでは、コンテンツ要素は利用可能なスペースを埋めるために伸縮しません。高さは、コンテナではなくコンテンツの高さです。

これらはかなり小さな制限ですが、知っておく価値があります。

ここから適応されたコードとアイデア

9
user568458

次のスタイルの要素は、中央に垂直に配置されます。

.content{
     position:relative;
     -webkit-transform: translateY(-50%);
     -ms-transform: translateY(-50%);
     transform: translateY(-50%);
     top:50%;
}

ただし、親要素の高さは固定する必要があります。このフィドルを参照してください： https://jsfiddle.net/15d0qfdg/12/

6
gm2008

私の場合、親コンテナの位置を絶対位置にしたかったのです。

<div class="absolute-container">
    <div class="parent-container">
        <div class="centered-content">
            My content
        </div>
    </div>
</div>

上下左右にいくつかの位置を追加する必要がありました。

.absolute-container {
    position:absolute;
    top:0;
    left:0;
    bottom:0;
    right:0;
}

.parent-container {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    display: table
}

.centered-content {
    display: table-cell;
    text-align: center;
    vertical-align: middle
}
5
A. D'Alfonso

このビンを参照してください： http://jsbin.com/yacom/2/edit

親要素を設定する必要があります

display:table-cell;
vertical-align:middle;
text-align:center;
5
Xieranmaya

あなたはまだフロートを使用しているため...

「float」を削除して、display：tableでラップしようとします

例：

<div style="display:table">
 <div style="display:table-cell;vertical-align:middle;text-align:center">
       Hai i'm center here Lol
 </div>
</div>
3
Strikersz7

いつかフロートが垂直方向の整列にブレーキをかけるので、避けるのが良いでしょう。

2
Munteanu Sergiu

display: table;を使用せずに別のラッパーでフロートします。動作します：

<div style="float: right;">
   <div style="display: table-cell; vertical-align: middle; width: 50%; height: 50%;">I am vertically aligned on your right! ^^</div>
</div>
1
Antonio Ooi

親要素の高さを設定します。

1
bhaity