图像元素下的中心 span 元素 (Ionic2)

Question

如何使用flex将这个跨度集中在头像下？

如果我删除跨度，头像图像会很好地集中，但是当我插入跨度时，即使 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 等关键字对齐属性也会切换方向。

或者，您可以通过使用绝对定位将其从正常流中移除来使化身居中。但是，在弹性容器中，.

在此处了解有关沿主轴的柔性对齐的更多信息：

在此处了解有关沿横轴弯曲对齐的更多信息：

Answer 2

如果你想在整个父容器中垂直和居中定位，上面的答案是最好的方法，但是如果你想将 "bill gates" 样式设置为父容器的单个子容器，你可以简单地把他设计成...

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

图像元素下的中心 span 元素 (Ionic2)

Center span element under an image element (Ionic2)

html

css

sass

flexbox

ionic2