无法使用向后兼容的CSS定位元素

Question

我正在尝试在div中放置内容。

这个想法是使它跨浏览器兼容，所以我试图避免使用flex。我想找到使用兼容CSS的解决方案

和我正在使用的CSS

.tu-plus-wrapper {
    &__helper {
        display: inline-block;
        height: 100%;
        vertical-align: middle;
    }

    &__logo{
        vertical-align: middle;
    }

    &__content {
        display: inline-block;
        text-align: right;
        right: 0;
        margin-left: auto;

        &__points {
            font-family: $RobotoLight;
            font-size: 2.4rem;
            line-height: 36px;
        }

        &__text {
            font-family: $RobotoRegular;
            font-size: 1.2rem;
            line-height: 20px;
        }
    }
}

我想将徽标垂直对齐，并将右侧内容与父div的最右边对齐，但是存在某种样式冲突。我会在这里欣赏一些CSS魔术。

当然还有html结构：

<div class="tu-plus-wrapper">
    <span class="tu-plus-wrapper__helper"></span>
    <img class="tu-plus-wrapper__logo" src="assets/imgs/tuplus/tuplus.svg">
    <div class="tu-plus-wrapper__content">
        <div class="tu-plus-wrapper__content__points">{{points}}</div>
        <div class="tu-plus-wrapper__content__text">Puntos</div>
    </div>
</div>

Answer 1

要向右推元素，可以使用float: right。然后要垂直居中，一个技巧是使用top: -50%和transform: translateY(50%)

定位元素

.tu-plus-wrapper {
    position: relative;

    &__helper {
        display: inline-block;
        height: 100%;
        vertical-align: middle;
    }

    &__logo{
        position: relative;
        top: -50%;
        transform: translateY(50%);
    }

    &__content {
        display: inline-block;
        text-align: right;
        right: 0;
        margin-left: auto;
        float: right

        &__points {
            font-family: $RobotoLight;
            font-size: 2.4rem;
            line-height: 36px;
        }

        &__text {
            font-family: $RobotoRegular;
            font-size: 1.2rem;
            line-height: 20px;
        }
    }
}