画像要素の下にある中心スパン要素（Ionic2）

Question

フレックスを使用してアバターの下でこのスパンを集中化するにはどうすればよいですか？私はスパンを削除する場合

は、アバター画像はよく集中管理ですが、私はdisplay:blockでさえ、スパンを挿入するときには、右側に表示されます。ここで

私HTMLです：

<ion-navbar *navbar> 
    <ion-avatar item-center> 
     <img src="img/bill-gates-avatar.jpg"> 
     <span>Bill Gates</span> 
    </ion-avatar> 
</ion-navbar> 
<ion-content padding> 
    Content here... 
</ion-content> 

私SCSSです：

.tabs { 

    ion-navbar-section { 
     min-height: 16.6rem; 
    } 

    .toolbar { 
     min-height: 170px; 
    } 

    ion-avatar { 
     display: flex; 
     justify-content: center; 
     align-content: center; 
    } 

    ion-avatar img { 
     max-width: 8rem; 
     max-height: 8rem; 
     border-radius: 5rem; 
     border: 2px solid color($colors, light); 
    } 
} 

Answer 1

フレックスコンテナの初期設定では、項目はデフォルトで水平に配置されますを意味し、flex-direction: rowです。垂直方向の配置の場合は、デフォルト値をflex-direction: columnで上書きします。

ion-avatar { 
    display: flex; 
    flex-direction: column; /* align flex items vertically */ 
    justify-content: center; /* center items vertically, in this case */ 
    align-items: center;  /* center single-line items horizontally, in this case */ 
    align-content: center;  /* center multi-line items horizontally, in this case */ 
} 

だけでなく、あなたがflex-directionを切り替えることに注意してください、などalign-itemsとjustify-contentスイッチ方向とキーワード配向特性、。

また、アバターを絶対的な配置で通常のフローから取り除くことで、アバターを中央に置くことができます。しかし、フレックスコンテナでは、this may not work well in some browsers。

：ここ クロス軸に沿ってフレックスアライメント詳細については、こちらをご覧ください
• In CSS Flexbox, why are there no "justify-items" and "justify-self" properties?

：

---

はここ主軸に沿ってフレックスアライメント詳細については、こちらをご覧ください

• How does flex-wrap work with align-self, align-items and align-content?

Answer 2

上記の回答は全体の親コンテナ全体で最高のあなたが垂直たい場合は、それを行う方法、および中央の位置ですが、親コンテナの単一子として「法案ゲートを」スタイルにしたい場合あなたは単純に彼のようにスタイルを設定することができます...

.bill-gates{ 
    margin: auto; 
    position: absolute; 
    top: 0; left: 0; right: 0; bottom: 0; 
}