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中的网站导航栏中居中对齐文本?所遇到的程序开发问题。
如果觉得内存溢出网站内容还不错,欢迎将内存溢出网站推荐给程序员好友。
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)