Question

文字不居中，更靠右边。

我该怎么做才能解决它？

Answer 1

使用此：

text-align: center;

这将使文本在导航栏中居中。

Answer 2

margin-left: 20%;你将偏离中心。（所以删除这个）然后，使用Matthew T. Baker在评论中建议的内容列出ul中的列表项：ul.navbar li {text-align:center;}

Answer 3

请看这个HTML代码。我认为你的文字是居中的，但导航栏是在右边。下面的代码会将导航栏置于中心位置。如果我理解正确的话。我在google chorme上测试过。它工作正常。希望对你有所帮助。

    <html>
     <head>
     <style>
    .navbar {
    margin-left: auto;
    margin-right: auto;
    width: 70%;

}

ul.navbar li 
        {
            list-style-type: none;
            float:left;
        }

a:link,a:visited  
            {
                display:block;
                font-weight:bold;
                color:#C0C0C0;
                padding: 1.5em;
                text-decoration:none;
                text-transform:uppercase;
            }

a:hover,a:active  
            {
                background-color: #000066;
            }
     </style>

<body>
              <ul class="navbar">
               <li><a href=“index.html”>Home</a></li>
               <li><a href=“company.html”>Company</a></li>
               <li><a href=“services.html”>Services</a></li>
               <li><a href=“solutions.html”>Solutions</a></li>
               <li><a href=“projects.html”>Projects</a></li>
               <li><a href=“affiliations.html”>Affiliations</a></li>    
               <li><a href=“contact.html”>Contact</a></li>
          </ul>
          </body>
          </html>

Answer 4

我认为你需要的是一个DEMO

* {
  margin:0;
  padding:0;
}
ul.navbar 
        {  
          margin-left:0;
          margin-right:0;
            float: left;
            border: 2px solid #000066;
            overflow: hidden;
        }

ul.navbar li 
        {
            list-style-type: none;
            float:left;
        }

a:link,a:visited  
            {
                display:block;
                font-weight:bold;
                color:#C0C0C0;
                padding: 1.5em;
                text-decoration:none;
                text-transform:uppercase;
            }

a:hover,a:active  
            {
                background-color: #000066;
            }

Answer 5

您需要做的就是添加：

ul.navbar {
    padding: 0;
}

ul.navbar li {
    text-align: center;
}

希望这有帮助！

框中的文字未居中

5 个答案: