ブートストラップ4の垂直方向の整列

Bootstrap4の文書によると、定義済みのクラスalign-items-centerとjustify-content-centerを使用して、コンテンツを縦横に整列させることができます。私はBootstrap4のドキュメントの例を試して、それが動作するはずですが、次のコードでalign-items-centerとjustify-content-centerのクラスを使用すると、それは望ましくありません！私はulタグdisplay:flexをブートストラップクラスを使用して作成しますが、その内容（li tags）は水平方向と垂直方向の中央に揃えられていません。また、クロムのinspectsのulプロパティをチェックしました。margin-top: 0とmargin-bottom: valueです。何が問題ですか？ブートストラップ4の垂直方向の整列

HTML：

<body> 
     <div id="top-ribbon" class="container-fluid"> 
      <div class="row align-items-center"> 
       <div id="socials" class="col-6 col-md-2 offset-md-2"> 
        <ul class="d-flex align-items-center justify-content-center"> 
         <li class="list-inline-item color-white"><i">1</i></li> 
         <li class="list-inline-item color-white">2<i"></i></li> 
        </ul> 
       </div> 
      </div> 
     </div>

のCss：

color-white{ 
    color: white; 
} 
#top-ribbon{ 
    background-color: rgb(168, 8, 133); 
    border: 1px solid; 
    height: 200px; 
} 
.row{ 
    height: 200px; 
} 
#top-ribbon div{ 
    border: 1px solid; 
} 
#socials ul{ 
    border: 1px solid; 
}

JSFiddle

出典

2017-06-28 soheil

まあ、まず、あなたのHTML構文に問題があります。第二に、ブートストラップの要素であるデフォルトのパディングとマージンがulであることを認識する必要があります。これらを削除すると、目的の効果が得られます。

#socials ul { 
    border: 1px solid; 
    margin: 0; padding: 0; 
}

https://jsfiddle.net/xxofsr68/3/

私はあなたが見てするための2つの例を作りました。

出典

2017-06-28 19:22:47

おかげで、 "まず、あなたはHTML構文に問題を持っている" あなたは何を意味するのですか？ – soheil

@soheil遅く返事を申し訳ありません。あなたのHTMLタグは次のようなものでした： ''それはちょうど ' ' –

+0

ああ,,ありがとう:) – soheil

0

まず、ユニバーサルクラス、つまり* {margin：0px; padding：0px;} 余分なスペースを削除します。
追加の表示を縦に並べる場合：flex; align-flex：center;
プログラムのmargin-bottomが追加されているので、margin-bottom：0pxにする必要があります。

* { margin: 0px; padding: 0px; } .color-white { color: white; } #top-ribbon { background-color: rgb(168, 8, 133); border: 1px solid; height: 200px; Width:100%;float:left; } .row { height: 300px; } #top-ribbon div { border: 1px solid; height: 100%; } #socials { display: flex; align-items:center; } #socials ul { margin-bottom: 0px; width: 100%; float:left;text-align:center; } #socials ul li{float:left;}

<div id="top-ribbon" class="container-fluid"> <div class="row align-items-center justify-content-center"> <div id="socials" class="col-6 col-md-2 offset-md-2"> <ul class="d-flex align-items-center justify-content-center"> <li class="list-inline-item color-white">1</li> <li class="list-inline-item color-white">2</li> </ul> </div> </div> </div>

出典

2018-02-08 05:48:04 Anu

+0

コードのみの回答は、StackOverflowでお勧めしません。これが正解である理由について少し詳しく説明してください – Mittal

ブートストラップ4の垂直方向の整列

答えて

関連する問題