Question

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

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

＆＃13;

@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;
}

＆＃13;

<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>

＆＃13;

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

Answer 1

您需要将自己设置为与inline-block对齐，然后将其居中。

https://jsfiddle.net/x1w2ewt8/

.nav.sf-menu li {
  display: inline-block;
  text-align: center;
}

Answer 2

如果您使用的是bootstrap，请务必使用container和row类。

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

我已将容器的左右边距从200px缩小到10％。
我使用col-sm-1将每个链接设置为列宽为1。第一个元素使用col-sm-offset-4进行偏移（因此链接居中）。请记住，bootstrap总共使用12列。
我在text-align: center中使用了#main_menu来让它看起来更漂亮。

<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>

Answer 3

您可以为父div设置text-align:center

Answer 4

尝试此css，如果您要将所有li设置为需要设置的行display:block

，li正在使用display: inline-block;

＆＃13;

@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;
}
.nav>li {
    position: relative;
    display: inline-block!important;
 }
.nav>li>a:focus, .nav>li>a:hover {
    text-decoration: none;
    background-color:transparent!important;
  color:red;
}
.nav>li>a {
    padding: 10px 8px!important;
}

＆＃13;

<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>

<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%;">

    <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>

＆＃13;

尝试创建水平居中菜单

4 个答案: