center align inline-block 设置为相对位置答案

【问题标题】：center align inline-block set to position relativecenter align inline-block 设置为相对位置
【发布时间】：2014-06-14 10:45:57
【问题描述】：

如果你去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;但这没有任何效果。

【问题讨论】：

标签： html css sass

【解决方案1】：

它们看起来已经非常接近中心了，只是向左移动了一点。我可以通过将 .flip 的宽度设置为 230px（圆圈的宽度），将左侧圆圈设置为 float:left 并将右侧圆圈设置为 float:right 来使它们居中。中心圈不需要任何额外的东西。

【讨论】：

【解决方案2】：

您绝对定位了.flip-front 和.flip-back 元素，然后用left: 0; 将它们固定在左侧。

您可以通过添加来强制这些元素占据它们给定的所有宽度：

right: 0;

这会拉伸圆圈，但有几种方法可以解决这个问题。例如，您可以将它们的宽度设置为固定值：

width: 230px;

【讨论】：

【解决方案3】：

因为你绝对定位它们并且你有一个固定的宽度，你可以把它添加到 .flip-front .flip-back 中：

left: 50%;
margin-left: -115px;

此外，您可以摆脱 .flip 包装器并执行以下操作：

#intro .circle{
    margin: 60px 47.75px;
}

【讨论】：