Trying to create a horizontal centered menu

Question

I am trying to create a horizontal centered menu but it appears vertically centered after adding bootsrap css codes.

this is the css code of my application

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

Please how can I horizontally align the menus to the center

Answer 1

You need to set your li's to line up with inline-block and then center it.

https://jsfiddle.net/x1w2ewt8/

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

Answer 2

If you're using bootstrap, make sure to use container and row classes.

The code below will align the links horizontally if you zoom out far enough.

I've reduced the left and right margins for the container from 200px to 10%.
I've set each link to have a column width of 1 using col-sm-1 The first element was offset (so the links are centered) using col-sm-offset-4 . Remember, bootstrap uses 12 columns in total.
I've used text-align: center in #main_menu to make it look nicer.

 <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

Try this css, li is taking display:block if you want to set all li in a line you need to set 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>

Trying to create a horizontal centered menu

Question

4 answers

solution1
0 2016-10-13 13:51:27

solution2
0 2016-10-13 13:57:23

solution3
-1 2016-10-13 13:49:10

solution4
-1 ACCPTED 2016-10-13 13:52:46

Trying to create a horizontal centered menu

Question

4 answers

solution1 0 2016-10-13 13:51:27

solution2 0 2016-10-13 13:57:23

solution3 -1 2016-10-13 13:49:10

solution4 -1 ACCPTED 2016-10-13 13:52:46

solution1
0 2016-10-13 13:51:27

solution2
0 2016-10-13 13:57:23

solution3
-1 2016-10-13 13:49:10

solution4
-1 ACCPTED 2016-10-13 13:52:46