使用 text-align: center 而不是 text-align: left 时的半边距

Question

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

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

以防你不理解这部分：

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

margin-left: -175px 在左侧和居中版本之间 "delete" "natural" space，因此只比较边距更容易。

Answer 1

您的子元素 .center 正确居中。红色框及其边距居中。由于它是唯一的元素，您可以将边距加倍以获得所需的偏移，但下图应该有所帮助。橙色突出显示的是边距。

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

使用 text-align: center 而不是 text-align: left 时的半边距

Half margin when using text-align: center instead of text-align: left

html

css

text-align

margin

margin-left