图像元素下方的居中跨度元素(Ionic2) [英] Center span element under an image element (Ionic2)

问题描述

如何使用flex将这个范围集中在头像下?

How to centralize this span under the avatar using flex?

如果我删除跨度，则头像图像会很好地集中，但是当我插入跨度时，即使使用display:block，它也会显示在右侧.

The avatar image is well centralized if I remove the span, but when I insert the span, even with display:block it displays on the right side.

这是我的 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);
    }
}

推荐答案

flex容器的初始设置为flex-direction: row，这意味着项目默认情况下将水平对齐.对于垂直对齐，请使用flex-direction: column覆盖默认设置.

An initial setting of a flex container is flex-direction: row, meaning items will align horizontally by default. For vertical alignment, override the default with 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)也会切换方向.

Note that when you switch flex-direction, keyword alignment properties such as align-items and justify-content switch direction, as well.

或者，您也可以将化身居中，方法是将其从具有正常定位的正常流中移开.但是，在Flex容器中，这在某些浏览器中可能无法正常工作.

Alternatively, you can center the avatar by removing it from the normal flow with absolute positioning. However, in a flex container, this may not work well in some browsers.

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

Learn more about flex alignment along the main axis here:

• 在CSS Flexbox中，为什么没有"justify-items"和自我证明".属性?

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

Learn more about flex alignment along the cross axis here:

• flex-wrap如何与align-self，align-items和align-content一起使用?

这篇关于图像元素下方的居中跨度元素(Ionic2)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！