图像元素下的中心跨度元素(Ionic2)

Question

如何使用flex在avatar下集中这个跨度？

如果我删除跨度,则头像图像很好地集中,但是当我插入跨度时,即使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容器的初始设置是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切换方向)也是如此.

或者,您可以通过绝对定位将头像从正常流中移除来使其居中.但是,在Flex容器中,这在某些浏览器中可能无法正常工作.

了解有关沿主轴的柔性对齐的更多信息:

• 在CSS Flexbox中,为什么没有"justify-items"和"justify-self"属性？

在此处了解有关沿交叉轴的柔性对齐的更多信息:

• flex-wrap如何使用align-self,align-items和align-content？