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容器的初始设置为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容器中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

如果你想要在整个父容器中进行垂直和中心定位，上面的答案是最好的方法，但如果你想要设计风格＆＃34;账单门＆＃34;作为父容器的单个子容器，您可以简单地为他设置样式......

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

图像元素下的中心跨度元素（Ionic2）

2 个答案: