Question

我在website处遇到问题，我正试图将菜单置于中心位置。我通常会添加一个display：inline-block to，但在这种情况下不起作用，因为它会破坏下拉列表的布局。如何在不破坏下拉列表的情况下将其置于中心位置？

Answer 1

一种可能的解决方案是为您的导航<ul>提供宽度，然后margin左右为auto

CSS：

#nav_custom {
  //your current styles
  width: 430px; // could be 40% also
  margin: 0 auto;
}

编辑我也注意到下拉菜单存在同样的问题。在这种情况下，你将不得不玩一些CSS游戏，让它按照你想要的方式工作。

CSS：

.level1 {
  width:100%;
  position: absolute;
  left: 0px;
}

.navbar-nav {
  // position: relative; <- remove this entry
}

.container {
  position: relative;
}

我们将最后一个相对父级设为容器div，即导航栏的全宽。这样，我们就可以将下拉列表的width设置为100%并将其放置在左侧。

水平居中而不影响孩子

1 个答案: