이미지 요소 아래 가운데 스팬 요소 (Ionic2)

Question

flex를 사용하여 아바타 아래에이 스팬을 중앙화하는 방법은 무엇입니까? 나는 범위를 제거하면

는 아바타 이미지는 물론 중앙하지만, 내가 display:block으로도, 스팬을 삽입 할 때이 오른쪽에 표시됩니다.

<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입니다 항목을 의미하는 것은 기본적으로 수평 정렬됩니다

은 여기 내 HTML입니다. 수직 정렬의 경우 기본값을 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; 
}