html - 中心对齐内联 block 设置为相对位置

Question

如果您转到 http://checkify.ca/science-world/

我试图将悬停时翻转的三个圆圈居中。目前我有

CSS

.flip {
    position: relative;
    display: inline-block;
    margin: 0 auto;
    text-align: center;
    width: 295px;
    min-height: 380px;

    @include perspective(1000);
    .flip-front, .flip-back {
        position: absolute;
        top: 0;
        left: 0;
        @include transform-style(preserve-3d);
        @include backface-visibility(hidden);
        @include transition(0.75s);
    }
    .flip-front {
        z-index: 5;
    }
    .flip-back {
        z-index: 0;
        @include rotateY(-180deg);
    }
    &:hover .flip-front {
        z-index: 5;
        @include rotateY(180deg);
    }
    &:hover .flip-back {
        z-index: 10;
        @include rotateY(0deg);
    }
}

但这似乎行不通。父元素“Intro”也设置为 text-align: center;但这没有效果。

Answer 1

它们看起来已经很靠近中心了，只是向左移动了一点。我可以通过将 .flip 的宽度设置为 230px(圆的宽度)，将左手圆设置为 float:left，并将右手圆设置为 float:right，从而使它们居中。中心圆不需要任何额外的东西。