Flexboxはインラインブロックスパンを垂直方向にセンタリングしていません

Question

ダッシュボードがあります。スプライトアイコンを含むラッパーブロックが設定されています。スプライトアイコンは親の内側に縦と横の中央に配置する必要があります。

フレックスボックスの使い方をどのようにしたいのか、どのように配置するのかブロックを決めました。

私もアイコンがtext-alignプロパティを使用して水平に集中しているが、私は.viewまたは.sprite-icon要素に追加したときに、何らかの理由justify-content: centerために何もしません。それを.views要素に追加すると、必要なものが中央に配置されず、.viewブロック間のパディングが壊れます。

は、私がここでの問題を示す設定私のJSFiddleを参照してください：https://jsfiddle.net/efarley/k0m4nxny/

.views { 
 
    display: flex; 
 
    flex-direction: row; 
 
    flex-wrap: wrap; 
 
    justify-content: space-around; 
 
} 
 
.view { 
 
    height: 105px; 
 
    text-align: center; 
 
    width: 105px; 
 
} 
 
.sprite-icon { 
 
    background-image: url('http://67.media.tumblr.com/b2336d673e315081b6d657f8258c313d/tumblr_mv98xzSiJu1qhori9o1_500.jpg'); 
 
    display: inline-block; 
 
    height: 35px; 
 
    width: 35px; 
 
} 
 
.sprite-icon.one { 
 
    background-position: 0 0; 
 
} 
 
.sprite-icon.two { 
 
    background-position: 0 35px; 
 
} 
 
.sprite-icon.three { 
 
    background-position: 0 70px; 
 
}

<div class='views'> 
 
    <div class='view'> 
 
    <span class='sprite-icon one'></span> 
 
    </div> 
 
    <div class='view'> 
 
    <span class='sprite-icon two'></span> 
 
    </div> 
 
    <div class='view'> 
 
    <span class='sprite-icon three'></span> 
 
    </div> 
 
</div>

Answer 1

あなたはその後、フレックスセンタリングプロパティを追加し、あなたのviewフレックスコンテナを作成する必要があります。

.view { 
    height: 105px; 
    text-align: center; 
    width: 105px; 
    display: flex;    /* new */ 
    align-items: center;  /* new */ 
    justify-content: center; /* new */ 
} 

revised fiddle

justify-contentプロパティは、コンテナだけを曲げるために適用されることに注意してください。あなたの質問では、それをフレックスアイテムに適用していました。それが失敗した理由です。

はフレックスセンタリング詳細については、こちらをご覧ください：

• How to Center Elements Vertically and Horizontally in Flexbox
• Methods for Aligning Flex Items

Answer 2

は、これらの設定を試してみてください。

.sprite-icon { 
    display: block; 
    position: relative; 
    margin: 35px auto; 
    background-image: url('http://67.media.tumblr.com/b2336d673e315081b6d657f8258c313d/tumblr_mv98xzSiJu1qhori9o1_500.jpg'); 
    height: 35px; 
    width: 35px; 
} 

margin 35px autoセンターをhorzontally（ときpositionはrelative）、それを垂直に中央に配置する35ピクセル下に移動しますが、これはdisplayが今度はblockであるためです。 https://jsfiddle.net/0t4vbzxb/1/