将链接置于导航栏中心(Centre the links in a navigation bar)

如何将链接本身置于导航栏中心？

边框是流畅的，导航按钮重新排列到不同的屏幕尺寸，但我不能让它们在中间，而是总是在左边。

我的HTML：

<div id="centerment"> <div id="navigation"> <div id="menu4"> <ul> <li><a href="index.html"> <span class="title"><strong>HOME</strong></span></a> </li> <li><a href="about.html"> <span class="title"><strong>ABOUT</strong></span></a></li> <li><a href="wood.html"> <span class="title"><strong>WOOD</strong></span> </a> </li> <li><a href="contact.html"> <span class="title"><strong>CONTACT</strong></span></a></li> </ul> </div>

我的CSS：

所有3个响应大小:(移动，平板电脑和桌面）。

#centerment { position:relative; clear: both; float: left; margin-left: 0px; margin-right: 0px; width: 100%; display: block; } #menu4 ul { list-style: none; font-family: "corbert regular regular"; font-size: 10px; letter-spacing: 2px; line-height: 1.2em; float: left; clear: left; border-bottom: 1px solid #000; border-top: 1px solid #000; } #menu4 ul li{ float: left; } #menu4 ul li a{ display: inherit; text-decoration: none; color: #000000; text-align: center; margin-left: 0 auto; margin-right: 0 auto; padding-top: 10px; padding-right: 10px; padding-bottom: 5px; padding-left: 10px; width: 170px } #menu4 ul li a span{ display:inherit; } #menu4 ul li a span.title{ } #menu4 ul li a:hover span.title{ color: #000000; } #menu4 ul li a span.text{ padding: 0px 5px; font-family: "corbert regular regular"; font-size: 13px; font-style: normal; font-weight: 300; letter-spacing: normal; line-height: 1.6em; color: #000000; visibility: hidden; } #menu4 ul li a:hover span.text{ visibility:visible; } .gridContainer.clearfix #navigation #menu4 ul li a .title { font-family: Corbert; }

非常感谢提前！

How do you centre the links themselves in the navigation bar?

The border is fluid and the nav buttons rearrange themselves to different screen sizes but I just can't get them to be in the middle, instead they are always on the left.

My HTML:

<div id="centerment"> <div id="navigation"> <div id="menu4"> <ul> <li><a href="index.html"> <span class="title"><strong>HOME</strong></span></a> </li> <li><a href="about.html"> <span class="title"><strong>ABOUT</strong></span></a></li> <li><a href="wood.html"> <span class="title"><strong>WOOD</strong></span> </a> </li> <li><a href="contact.html"> <span class="title"><strong>CONTACT</strong></span></a></li> </ul> </div>

My CSS:

In all 3 responsive size: (mobile, tablet and desktop).

#centerment { position:relative; clear: both; float: left; margin-left: 0px; margin-right: 0px; width: 100%; display: block; } #menu4 ul { list-style: none; font-family: "corbert regular regular"; font-size: 10px; letter-spacing: 2px; line-height: 1.2em; float: left; clear: left; border-bottom: 1px solid #000; border-top: 1px solid #000; } #menu4 ul li{ float: left; } #menu4 ul li a{ display: inherit; text-decoration: none; color: #000000; text-align: center; margin-left: 0 auto; margin-right: 0 auto; padding-top: 10px; padding-right: 10px; padding-bottom: 5px; padding-left: 10px; width: 170px } #menu4 ul li a span{ display:inherit; } #menu4 ul li a span.title{ } #menu4 ul li a:hover span.title{ color: #000000; } #menu4 ul li a span.text{ padding: 0px 5px; font-family: "corbert regular regular"; font-size: 13px; font-style: normal; font-weight: 300; letter-spacing: normal; line-height: 1.6em; color: #000000; visibility: hidden; } #menu4 ul li a:hover span.text{ visibility:visible; } .gridContainer.clearfix #navigation #menu4 ul li a .title { font-family: Corbert; }

Many many thanks in advance!