html - 使用文本对齐或内联 block 使导航栏居中？ (杰基尔)

Question

我很难将导航栏居中。我曾尝试在某些区域用“内联 block ”替换“ block ”，但没有取得任何成功。我也尝试过“text-align: center”，但没有用。我尝试了“文本对齐:”左、右和居中，但它根本没有改变。我找对地方了吗？其他一切都按预期运行，所以我不敢碰任何东西。这是 jsfiddle.

#navbar ul li a, .dropdown-toggle {
  color: white;
  text-align: center; /*doesn't seem to do anything*/
  padding: 14px 16px;
  text-decoration: none;
  display: inline-block;
}

Answer 1

使用 text-align: center 将元素居中的技巧有两个:

1. 在包含的父元素上声明display: block 和 text-align: center
2. 在嵌套的子元素上声明display: inline-block

您可以使用 text-align: center 以这种方式将任何 inline-block 元素居中 if 父元素是 block 元素。

您需要相应地调整您的样式:

#navbar ul:not(.dropdown-menu) {
    float: none;
    display: block;
    text-align: center;
}

#navbar ul:not(.dropdown-menu) > li {
    display: inline-block;
    float: none;
}

任何时候需要对齐元素时要考虑的一个重要因素是留意 float 规则，它们将否定任何使用 display 规则对齐元素的尝试.

fiddle 演示: https://jsfiddle.net/kbuoL6sm/6/