对 CSS 绝对定位、浮动、居中感到困惑 [关闭]

Question

我已经阅读了一些关于 CSS 的文章和教程，它们都涵盖了 Absolute Position、Floating 等。我认为我理解它，并且通常可以同时使用这两者并实现所需的设计。但是在这里和那里我遇到了一种情况，我不明白一个绝对定位或浮动的元素发生了什么，并且不能让它按照我需要的方式运行。所以我对这些 CSS 规则如何工作的理解中缺少一些东西。

这是一个具体的例子。我正在为一个非营利组织重新设计一个 WP 主题。在他们的设计中，他们希望以导航为中心。似乎没有什么比这更容易了。但到目前为止，我完全未能实现这一目标。

该网站的链接在这里：http://justaddsolutions.com/d_build/

Answer 1

有很多方法可以实现这一点。

第一个

1. 将导航包裹在全宽包装器中。
2. 设置文本对齐：居中；用于包装器。
3. 设置显示：inline-block；或内联，用于导航栏。
4. 完成！

第二个

如果你知道导航栏的确切宽度，你可以试试这个解决方案：

1. 设置位置：绝对；用于导航。
2. 设置左侧：50%；用于导航。
3. 将 margin-left 设置为导航的负宽度除以 2。
4. 完成！

我相信还有更多方法可以实现这一点，但这两种方法对我来说非常有用！ 您不应该使用浮动来进行居中对齐，仅用于左右对齐。