web-dev-qa-db-ja.com

flexbox IE11およびIE10では

要素が垂直方向に配置されているクロスブラウザーソリューションを作成するにはどうすればよいですか？

http://jsfiddle.net/e2yuqtdt/3/

これはFirefoxとChromeの両方で機能しますが、IE11では機能しません

<div class="page_login">
    <div>vertical-align:center; text-align:center</div>
</div>

html, body {
    height:100%;
}

.page_login {
    display:flex;
    height:100%;
    width:100%;
    background:#303030;
}

.page_login > div {
    margin:auto;
    background:#fff;
    min-height:100px;
    width:200px;
}

更新

中央に配置された要素がビューポートの高さよりも高い場合、背景は100％であり、100％のスクロール高さではありません

http://jsfiddle.net/e2yuqtdt/8/

html, body {
    min-height:100%;
    height:100%;
}

.page_login {
    display:flex;
    min-height:100%;
    height:100%;
    width:100%;
    background:#303030;
}

.page_login > div {
    margin:auto;
    background:#fff;
    height:800px;
    width:200px;
}
cssinternet-explorerinternet-explorer-10flexbox
10
clarkk

要素が垂直方向に配置されているクロスブラウザーソリューションを作成するにはどうすればよいですか？

このフィドルを見てください： http://jsfiddle.net/5ry8vqkL/

そこで適用されている手法は「display：table」を使用することです。これはアプローチの詳細なビューの記事です http://css-tricks.com/centering-in-the-unknown/

サポートされているブラウザはここにあります： http://caniuse.com/#search=table-cell

HTML：

<div class="container">
    <div id="page-login">
        <div class="panel">Some content</div>
    </div>
</div>

CSS：

html, body {
    min-height:100%;
    height:100%;
}

.container {
    display: table;
    height:100%;
    width:100%;
    background:#303030;
}

#page-login {
    display: table-cell;
    vertical-align: middle
}

.panel {
    height: 100px;
    background-color: #fff;
}
7
elad.chen

Divに高さを追加する必要があります。最小の高さのみを指定したので、IEは自動的にそれを可能な限り最大に拡張します。したがって、次のように高さを追加します。

.page_login > div {
     margin:auto;
     background:#fff;
     min-height:100px;
     width:200px;
     height:200px;
}

http://jsfiddle.net/e2yuqtdt/6/

これはフレックスボックスであり、したがってフレックスボックスであるため、高さをパーセンテージにすることをお勧めします。したがって、divの高さは-たとえば-ページの高さの50％になります。ただし、ページの高さが200px未満でない限り、高さは100pxになります。

更新： 残念ながら、CSVだけでdivにページ全体を埋め込むことはできません。ただし、JavaScriptで可能であると思われます。ここを参照してください 残りの画面スペースの高さをdivで埋めます

実際に-それを使用してそれを達成しました テーブル div

http://jsfiddle.net/e2yuqtdt/14/

<div>
    <div id="div1">
        <div id="div2">vertical-align:center; text-align:center</div>
    </div>
</div>


#div1 {
    display:flex;
    height:100%;
    width:100%;
    background:#303030;
}

#div2 {
    margin:auto;
    background:#fff;
    height:800px;
    width:200px;
}

この更新がelad.chenによる更新の後に行われることは知っていますが、すでにこれを実行しており、以下のコメントに投稿しています-質問を更新するためのラウンドがありませんでした。

2
CalvT