3

中央のフレックスボックスアイテムで絶対位置を使用すると、この問題が発生します。Firefox では動作しません。

ここにリンクがあります。

HTML

<div>
    <p>Center me!</p>
</div>

CSS

div
{
    width:350px;
    height:100px;
    border:1px solid black;

    position:absolute;
    left:0;
    top:0;

    /* Firefox */
    display:-moz-box;
    display:inline-flex;
    -moz-box-pack:center;
    -moz-box-align:center;

    /* Safari and Chrome */
    display:-webkit-box;
    -webkit-box-orient:horizontal;
    -webkit-box-pack:center;
    -webkit-box-align:center;

    /* W3C */
    display:box;
    box-orient:horizontal;
    box-pack:center;
    box-align:center;
}

divで絶対位置を使用する必要があるため、どうすればこれを修正できますか?

4

1 に答える 1

0

これを修正するには、絶対配置要素内に追加の div を配置し、フレックスボックスを表示してから、高さと幅を 100% にします。

<div class='container'>
<div>Centered Text here</div>
</div>

これが私の実装のフィドルです：私のソリューション（http://jsfiddle.net/pmvjb/）

于 2013-05-22T20:33:11.347 に答える