web-dev-qa-db-ja.com

bootstrap 3のグリフィコンを垂直に整列

私はグリフィコンを持っています：

<div class="col-xs-4 col-sm-2">
    <span class="glyphicon glyphicon-circle-arrow-up glyphicon-large"></span>
</div>

.glyphicon-large {
    min-height: 260px;
    font-size: 35px;
    width: 1em;
    display: block;
    top: 50%;
    margin: -0.5em auto 0px;
}

グリフィコンは、垂直に中央に整列しません。 firefoxを開いて要素を検査し、top 50%ルール、突然機能します。どうして？

csstwitter-bootstraptwitter-bootstrap-3glyphicons
11
matthijs

ブラウザのバグの説明

MDN top によると：

相対的に配置された要素（position: relativeを含むもの）の場合、それは要素が通常の位置より下に移動される量を指定します 。
注：割合は、要素を含むブロックの高さの割合として適用されます

W3上のtop によると：

相対的に配置されたボックスの場合、オフセットはボックス自体の上端を基準とします（つまり、ボックスには通常のフロー内の位置が与えられ、次にその位置からオフセットされます）これらのプロパティに）。 注：パーセンテージは、包含ブロックの高さを指します

これが私の推測です：

ブラウザが最初にビジュアルツリーをレンダリングしている でtop:50%;を確認すると、親が高さを設定しているようです。高さは特に適用されておらず、子コンテンツもロードされていないため、このdiv（およびすべてのdiv）の高さは、特に指示がない限り、効果的にゼロから始まります。次に、グリフをゼロの50％押し下げます。

後でプロパティを切り替えると、ブラウザーはすべてを既にレンダリングしているため、親コンテナーの計算された高さはその子の高さによって提供されます。

最小限の完全で検証可能な例

注：これは実際にはBootstrapまたはGlyphiconsとは関係ありません。依存関係を回避するためにブートストラップでは、top: 1pxクラスによって適用される.glyphiconを追加します。これは50%によって上書きされますが、それでも重要な役割を果たします。

次に、親/子要素の簡単なセットを示します。

<div id="container">
    <div id="child">Child</div>
</div>

プロパティの切り替えをより再現可能な方法でシミュレートするには、2秒待ってから、次のようにJavaScriptでスタイルを適用します。

window.setTimeout(function() {
    document.getElementById("child").style.top = '50%';
},2000);

例1（ jsFiddle ）

開始点として、問題を再現しましょう。

#container {
    position: relative;

    /* For Visual Effects */
    border: 1px solid grey;
}
#child {
    position: relative;
    height: 50px;
    top: 1px;

    /* For Visual Effects */
    border: 1px solid orange;
    width: 50px;
    margin: 0px auto;

}

ウィンドウのサイズを変更するとすぐに、ブラウザが画面を再描画し、要素を最上部に戻します。

example1 screen

例2（ jsFiddle ）

子要素にtop: 50%を追加した場合、上書きするものがないため、JavaScriptがプロパティを追加しても何も起こりません。

例3（ jsFiddle ）

top: 49%を子要素に追加した場合、DOMには何か更新する必要があるため、奇妙な不具合が再び発生します。

例4（ jsFiddle ）

height: 50px;を子ではなくコンテナに追加した場合、topプロパティには、最初から配置すべきものがあり、JavaScriptでトグルを使用する必要はありません。

垂直に配置する方法

何かを一貫して垂直方向に中央揃えする方法を知りたいだけの場合は、以下を実行できます。

テキストを垂直方向に中央揃えにするコツは、コンテナの高さに等しい line-height を設定することです。 1行が100ピクセルを占め、オンラインのテキスト行が10を占める場合、ブラウザは残りの90ピクセルの中央にテキストを配置しようとします。

.glyphicon-large {
    min-height:  260px;
    line-height: 260px;
}

jsFiddleのソリューション

41
KyleMit

H1タグ内にあるグリフアイコンを中心にしてみましたが、時間がかかりました。そのため、グリフを含むSPANタグ内のフォントサイズと色を実際に変更できることがわかりました。

したがって：

<h1><span class="glyphicon glyphicon-envelope" style="font-size: 24px; color: #108db7;"></span>&nbsp;Mes Messages</h1>

実際に私のために働いた。

1
Rowan