嘗試創建水平居中菜單
[英]Trying to create a horizontal centered menu
問題描述
我正在嘗試創建水平居中菜單，但在添加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>
請問如何將菜單水平對齊
4 個解決方案
解決方案1
0 2016-10-13 13:51:27
您需要將li設置為與inline-block ，然后將其居中。
https://jsfiddle.net/x1w2ewt8/
.nav.sf-menu li {
display: inline-block;
text-align: center;
}
解決方案2
0 2016-10-13 13:57:23
如果使用引導程序，請確保使用container和row類。
如果縮小得足夠遠，下面的代碼將使鏈接水平對齊。
- 我已將容器的左右邊距從200px減少到10％。
- 我已設置的每個鏈路使用以具有1的列的寬度
col-sm-1使用的第一個元素是偏移（因此鏈接被居中）col-sm-offset-4。 請記住，引導程序總共使用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>
解決方案3
-1 2016-10-13 13:49:10
您可以為父div設置text-align:center
解決方案4
-1 已采納 2016-10-13 13:52:46
試試這個css，如果要設置一行中的所有li ，則li正在使用display:block 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>
有沒有辦法使用 CSS 為我擁有的這個水平菜單創建一個下拉菜單？ 我試圖在“文章”部分創建下拉菜單
[英]Is there a way to create a dropdown menu using CSS to this horizontal menu I have? Im trying to create the dropdown menu on the “Article” section
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.