css - 对 CSS 绝对定位、 float 、居中感到困惑

标签 css css-float css-position centering

<分区>

我已经阅读了一些关于 CSS 的文章和教程,所有这些都涵盖了绝对位置、 float 等。我认为我理解得很好,并且通常可以同时使用两者并实现所需的设计。但有时我会遇到这样一种情况,即我不了解绝对定位或 float 的元素发生了什么,并且无法使其按照我需要的方式运行。因此,我对这些 CSS 规则的工作原理的理解有所欠缺。

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

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

最佳答案

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

第一个

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

第二个

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

  1. 设置position:absolute;用于导航。
  2. 设置左侧:50%;用于导航。
  3. 将 margin-left 设置为导航的负宽度除以 2。
  4. 完成!

我相信有更多方法可以实现这一点,但这两种方法对我来说非常有用! 您不应将 float 用于居中对齐,而应仅用于左右对齐。

关于css - 对 CSS 绝对定位、 float 、居中感到困惑,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17251571/

上一篇:html - 如何用css控制特定的句子

下一篇:css - 如何显示固定宽度和可变高度的图像

相关文章:

css - 如何绝对定位在 float :left? 内

html - w3-css 空列不占用空间但在 Bootstrap 中它确实

javascript - 通过滚动显示另一个 div 后面的 div

html - 具有负边距的 float 元素会导致文本换行错误?

css - 固定div右侧的div高度

css - 适合各种尺寸的各种div元素,以适应整个容器宽度

javascript - 尝试为我的游戏服务器设置加载屏幕

html - 响应式电子邮件图像

html - 将元素保持在 div 的底部,同时保持它在流中

html - 具有固定位置的可调整大小的居中 div 标签