html - 尝试创建一个水平居中的菜单

我正在尝试创建一个水平居中的菜单，但在添加 bootsrap css 代码后它显示为垂直居中。

这是我的应用程序的CSS代码

@media (max-width: @screen-xs) {
  body {
    font-size: 10px;
  }
}
@media (max-width: @screen-sm) {
  body {
    font-size: 14px;
  }
}
h2 {
  font-size: 300%;
  margin-bottom: 0px;
  clear: both;
  margin-left: 7px;
}
h5 {
  margin-top: 0px;
  padding: 0px;
  margin-left: 15px;
  color: #fff;
  margin-bottom: 1px;
  clear: both;
}
hr {
  margin: 0px;
}
.container {
  width: auto;
  margin-left: 200px;
  margin-right: 200px;
  height: 500px;
  max-height: 500px !important;
  padding-left: 0px;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" crossorigin="anonymous">
<div style="background-color:#191919;" class="container">
  <h2 style="color: #32CD32; font-family: Copperplate; align:left;">
Header
</h2>
  <h5>... caption</h5> 
  <hr style="width:101.6%;">


  <div class="col-lg-12">
    <nav id="main_menu">
      <div align="center" class="menu_wrap">
        <ul class="nav sf-menu">
          <li class="sub-menu"><a href="#"><small>Mission</small> </a>
          </li>
          <li class="sub-menu"><a href="#"><small>About Us</small></a>
          </li>
          <li class="sub-menu"><a href="#"><small>Grants</small></a>
          </li>
          <li class="sub-menu"><a href="#"><small>News</small></a>
          </li>

        </ul>
      </div>
    </nav>
  </div>

</div>

请问如何将菜单水平对齐到中心

最佳答案

如果您使用 Bootstrap ，请确保使用 container 和 row 类。

如果您缩小得足够远，下面的代码将水平对齐链接。

我已将容器的左右边距从 200 像素减少到 10%。
我使用 col-sm-1 将每个链接的列宽设置为 1 第一个元素使用 col-sm-offset 偏移(因此链接居中) -4。请记住，bootstrap 总共使用 12 列。
我在 #main_menu 中使用了 text-align: center 以使其看起来更漂亮。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
crossorigin="anonymous">
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.min.js"></script>
<style type="text/css">

@media (max-width: @screen-xs) {
    body{font-size: 10px;}
}

@media (max-width: @screen-sm) {
    body{font-size: 14px;}
}


h2{
     font-size: 300%; 
     margin-bottom: 0px;
     clear: both;
     margin-left: 7px;
}
h5{
    margin-top: 0px;
    padding: 0px;
    margin-left: 15px;
    color: #fff;
    margin-bottom: 1px;
    clear: both;
}
hr{
    margin: 0px;
}

.container {
    width: auto;
    margin-left: 10%;
    margin-right: 10%;
    height:500px;
    max-height:500px !important;
    padding-left: 0px;
  }

#main_menu{
    text-align: center;
}

</style>

</head>

<body style="background-color:#1f5060;">

<div style="background-color:#191919;" class="container">
<h2 style="color: #32CD32; font-family: Copperplate; align:left;">
Header
</h2>
<h5>... caption</h5> <hr style="width:101.6%;">

<section class="container">
    <div class="row">
    <nav id="main_menu">
            <ul class="nav sf-menu">
                <div class="col-sm-1 col-sm-offset-4">
                    <li class="sub-menu"><a href="#"><small>Mission</small> </a></li>                  
                </div>
                <div class="col-sm-1">
                     <li class="sub-menu"><a href="#"><small>About Us</small></a></li>                                 
                </div>
                <div class="col-sm-1">
                    <li class="sub-menu"><a href="#"><small>Grants</small> </a></li>                  
                </div>
                <div class="col-sm-1">
                    <li class="sub-menu"><a href="#"><small>News</small> </a></li>                  
                </div>
            </ul>
    </nav>
    </div>
</section>

关于html - 尝试创建一个水平居中的菜单，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40022699/

html - 尝试创建一个水平居中的菜单

上一篇：jquery - 显示带有 break 标签的 Flex

下一篇：css - Bootstrap css 问题 - 覆盖新类名