css - 在导航栏中将链接居中

Question

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

边框是流畅的，导航按钮会重新排列以适应不同的屏幕尺寸，但我无法让它们位于中间，而是它们始终位于左侧。

我的 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;
     }

非常非常感谢!

Answer 1

设置包含元素为text-align: center;然后将 li 设置为显示:inline-block；如果 a 标签上没有 float ，应该这样做。