为什么我的子元素没有向左对齐'left: 50%”？

CSS 'Left' 属性未按预期对齐

应用“left: 50%”属性将子元素定位在父元素，您可能会遇到子元素未按预期对齐的情况。出现这种差异的原因是 CSS 定位是根据特定标准进行操作的。

了解 CSS 中的定位

在提供的代码片段中，您已为两个 div 指定了 CSS 样式， “外部”（父母）和“内部”（孩子）。子 div 的 CSS 包含“left: 50%”，希望使子 div 的左边框在父 div 内居中。但是，此方法由于缺少属性“position”而失败。

添加“Position”属性

要使“left”属性生效，您必须定义子 div 的“position”属性。该属性指定元素的定位行为。您有两个主要选项：

• absolute: 从文档的正常流中删除元素并将其相对于其最近的定位祖先定位（例如本例中的“outer”） case)。
• relative: 相对于文档流中的正常位置定位元素。

修订的代码片段

通过添加“position:absolute;”属性给子 div，您可以确保“left: 50%”属性将使子 div 的左边框在父 div 内居中。

#inner {
   position: absolute;
   left: 50%;
}

视觉确认演示

请参阅 http://jsfiddle.net/vrse2/6/ 上更新的演示，了解修改后的 CSS 如何按预期将子 div 置于父 div 中。

以上是为什么我的子元素没有向左对齐'left: 50%”？的详细内容。更多信息请关注PHP中文网其他相关文章！