我很难将导航栏居中。我曾尝试在某些区域用“内联 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;
}
最佳答案
使用 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/
关于html - 使用文本对齐或内联 block 使导航栏居中? (杰基尔),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46856248/