1. 首頁
  2. 問答
  3. 試圖創建一個水平居中的菜單

試圖創建一個水平居中的菜單

2016-10-13 35 views
0

我想創建一個水平居中菜單，但它似乎在添加靴帶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>

請我怎麼能水平菜單對齊到中心

來源

2016-10-13 user6731422

+0

你的意思是，你要在內嵌導航？ '使命 - AboutUs - 贈款' –

+0

是的懸停效果只適用於菜單文字顏色 – user6731422

+0

[https://jsfiddle.net/tjbaezid/325503tm/2/]是你在找？ –

回答

-1

如果要設定所有li在你需要設置display: inline-block;

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

來源

2016-10-13 13:52:46

+0

我可以關閉菜單之間的差距，並將懸停效果單獨應用於菜單文本 – user6731422

+0

您只需添加填充以增加/減少單詞間的差距 – Keith

+0

我的意思是任務|撥款>>>>在任務和贈款之間的間距很大 – user6731422

-1

您可以設置text-align:center爲你的父母DIV

的CSS代碼

來源

2016-10-13 13:49:10 ARASH

0

線試試這個CSS，li正在display:block如果您'使用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>

來源

2016-10-13 13:57:23 Ahmad

+0

菜單之間的差距非常大 – user6731422

+0

我將列大小從3減小到1。 – Ahmad

相關問題

 相關問題