0

我只是想出了一个奇怪的行为。我使用了一个 divtext-align: center和一个内部 divdisplay: inline-block来使内部 div 居中。所以到目前为止没有什么令人兴奋的。然后我在内部 div 上添加了一个左边距，因为我需要它从中心位置稍微向右移动。但是我添加的边距总是错误的，我就是不明白为什么。所以我做了一些测试，发现当你使用时，text-align: center你必须把边距加倍才能得到正确的，但为什么呢？我真的很想了解这种行为。

我做了一个快速的小提琴，所以你可以明白我的意思：https ://jsfiddle.net/wnjg5ks4/

以防万一你不明白这部分：

.container2 {
    text-align: center;
    width: 400px;
    margin-left: -175px;
}

用于“margin-left: -175px删除”左侧和居中版本之间的“自然”空间，因此只比较边距更容易。

4

1 回答 1

1

您的子元素 .center 正确居中。红色框及其边距居中。由于它是唯一的元素，因此您可以将边距加倍以获得所需的转变，但下图应该会有所帮助。橙色高光是边距。

只需稍微移动元素，您可以使用transform:translateX(100px);或任何适合您的值。

在此处输入图像描述

于 2018-01-22T18:13:08.137 回答