HTML – 如何在CSS中的网站导航栏中居中对齐文本？_html-js-css

概述关于如何将文本放在导航栏上,就像它只向左移动一样,我有点难过.我已经尝试过中心对齐,但它仍然继续坚持到一边.如果有人能告诉我我犯了什么错误,我将不胜感激. HTML： <body><div id="wrap"></div> <ul id="nav"> <li><a href="#">About Us</a></li> <li><a href="#">Our Products</a 关于如何将文本放在导航栏上,就像它只向左移动一样,我有点难过.我已经尝试过中心对齐,但它仍然继续坚持到一边.如果有人能告诉我我犯了什么错误,我将不胜感激.

HTML：

<body><div ID="wrap"></div>   <ul ID="nav">  <li><a href="#">About Us</a></li>  <li><a href="#">Our Products</a></li>  <li><a href="#">FAQs</a></li>  <li><a href="#">Contact</a></li>  <li><a href="#">Login</a></li></ul><div ID="content"></div></body>

CSS：

body {    margin: 0;    padding: 0;    text-align: justify;    Font-family: "Trebuchet MS",Arial,Helvetica,sans-serif;    Font-size: 13px;    background-color:#425eb4;}*{    margin: 0 auto 0 auto;}#wrap {    height:150px;    background:url(images/header1.png) no-repeat center;    text-align:center;    background-color:#FFF;}#nav {    wIDth: 100%;    float: left;    padding: 0;    List-style: none;    background-color: #f2f2f2;    border-bottom: 1px solID #ccc;    border-top: 1px solID #ccc; }#nav li {    float: left;    text-align:center; }#nav li a {    display: block;    padding: 8px 15px;    text-decoration: none;    Font-weight: bold;    text-align:center;    color: #069;    border-right: 1px solID #ccc; }#nav li a:hover {    color: #c00;    text-align:center;    background-color: #fff;}    /* End navigation bar styling. */#content {    padding: 0 50px 50px;    wIDth:1000px;    height:800px;    background-color:#FFF;}

解决方法你需要把浮动：从你的#nav和li元素中取出.
然后添加display：inline-block;二者皆是.接下来将text-align：center添加到#nav.

#nav {    wIDth: 100%;    display: inline-block;    text-align: center;    padding: 0;    List-style: none;    background-color: #f2f2f2;    border-bottom: 1px solID #ccc;    border-top: 1px solID #ccc;     margin-left: 0px;  // looks like bootstrap is putting a left margin on your #nav you may want it off.}#nav li {   display: inline-block;   text-align:center; }

总结

以上是内存溢出为你收集整理的HTML – 如何在CSS中的网站导航栏中居中对齐文本？全部内容，希望文章能够帮你解决HTML – 如何在CSS中的网站导航栏中居中对齐文本？所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/web/1074249.html

HTML – 如何在CSS中的网站导航栏中居中对齐文本？

发表评论

评论列表（0条）