フレックスボックスの垂直中心のアイテム - アライメントアイテム：センターが機能しませんか？

Question

私はこのthreadのスタイリングを使って、divの空のスペースにプログレスバーを塗りつぶしました（他のアイテムだけがボタンです）。

align-items: centerは、進行状況バーを垂直方向に中央に配置しないという問題が解決されました。私は子供にalign-content: centerを使ってみましたが効果はありません。

ここでは、リンク

.wrapper { 
    display: flex; 
    flex-direction: row; 
    align-items: center; 
    width: 100%; 
    height: 5em; 
    background: #ccc; 
} 
.wrapper > .left 
{ 
    background: #fcc; 
} 
.wrapper > .right 
{ 
    background: #ccf; 
    flex: 1; 
} 

を開けなかった場合にはコードがありますマークアップ：

<div class="wrapper"> 
    <div class="left">Left</div> 
    <div class="right">Right</div> 
</div> 

誰かが私が間違ってやっているものを私に伝えることができますか？事前

のおかげでは、これは、それがどのように見えるかです：

Answer 1

私はあなたが右のそれを得るために次の操作を行うことができますね。

1. がmarginがために来てあります.progress要素 - まず無効にすることができます：

   .wrapper > .left > .progress { 
       margin: 0; 
   } 
   

2. wrapper

3. のための100％の高さを与える私はまた、物事を完了するためのラッパーのコンテナのheight: 10vhを削除しました。

revised fiddle hereを参照してください下のスニペット：

/* Latest compiled and minified CSS included as External Resource*/ 
 

 
/* Optional theme */ 
 

 
@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css'); 
 
body { 
 
    margin: 10px; 
 
} 
 
.wrapper { 
 
    display: flex; 
 
    align-items: center; 
 
    width: 100%; 
 
    background: #ccc; 
 
    height: 100%; 
 
} 
 
.wrapper > .left { 
 
    background: #fcc; 
 
    flex: 1; 
 
} 
 
.wrapper > .right { 
 
    background: #ccf; 
 
} 
 
.wrapper > .left > .progress { 
 
    margin: 0; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script type="text/javascript" src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> 
 
<link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css"> 
 

 
<div class="container"> 
 
    <div class="row"> 
 
    <div class="col-lg-6 col-lg-offset-3 col-md-6 col-md-offset-3 col-s-6 col-s-offset-3" style="background:purple; position:relative; border-radius:10px;"> 
 
     <div class="wrapper"> 
 
     <div class="left"> 
 
      <div class="progress"> 
 
      <div class="progress-bar" role="progressbar" aria-valuenow="35" aria-valuemin="0" aria-valuemax="100" style="width:35%"> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     <div class="right"> 
 
      <button type="button" aside-menu-toggle="menu-1" class="btn btn-sm btn-default">Меню</button> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

私はこれについてあなたの意見を知ってみましょう。ありがとう！あなたの.wrapperクラスに

align-items: center; 
    justify-content: center; 

を追加

Answer 2

フレックスコンテナにのみその直接の子にフレックスコンテキストを有効にします。したがって、あなたの "progress-bar" divは手の届かないところにあります。同様に、紫色の背景バーはフレックスコンテナ（ラッパー）の前にあるので、コンテンツの中央に配置されるとは思わないでください。これはguideです。

チェックこのコード：あなたのコードに基づいて

<div class="container"> 
    <div class="row"> 
    <div class="col-lg-6 col-lg-offset-3 col-md-6 col-md-offset-3 col-s-6 col-s-offset-3" style="background:purple; height:10vh; position:relative; border-radius:10px;"> 
     <div class="wrapper"> 
     <div class="left"> 
      left 
     </div> 
     <div class="right"> 
      right 
     </div> 
     </div> 
    </div> 
    </div> 
</div> 

ペンhere

Answer 3

してみてください。ここで

はフレキシボックスの位置に良い記事です： https://philipwalton.github.io/solved-by-flexbox/demos/vertical-centering/