本文目录
- 怎么在css中让导航条文字居中显示
- 怎么用CSS把网页导航条文字居中
- CSS已经浮动的导航条如何居中
- 如何让导航条层居中
- CSS中导航栏居中问题
- Bootstrap导航条如何居中和两端对齐
- 如何让css设计的导航栏居中显示
怎么在css中让导航条文字居中显示
《style type=“text/css“》
*{
margin:0;
padding:0;
}
ul,li{
list-style: none;
}
#nav{
width:100%;
}
#nav》ul{
width:80%;
margin:0 auto;
}
#nav》ul》li{
width:calc(20% - 20px);
margin:0 10px;
background-color: #ccc;
float: left;
text-align: center;
}
《/style》
怎么用CSS把网页导航条文字居中
文字居中用到css2.0中的text-align属性；
text-align属性是针对文字的对齐方式；
其中值包括：left(向左对齐)
center（居中）
right（右对齐）
justify（两端对齐）
inherit（默认对齐方式）
在这里我们将用到：text-align:center属性
CSS已经浮动的导航条如何居中
此时你只要给浮动的对象，加上相对应的宽度，让其上下外边距为0 左右外边距为自动，就可以实现居中！
html中的CSS样式修改为：
#globallink ul {
list-style: none;
padding: 0px;
overflow: hidden;
width: 700px;
margin: 0 auto;
}
即可：
如图
其中修改的属性介绍：
1、margin：简写属性在一个声明中设置所有外边距属性。该属性可以有 1 到 4 个值。
当设置上下边距之后，在设置左右我自动（auto）即可实现自动居中！（前提是要给对象元素设置觉得的宽度！）
如何让导航条层居中
《!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN“ “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“》
《html xmlns=“http://www.w3.org/1999/xhtml“》
《head》
《meta http-equiv=“Content-Type“ content=“text/html; charset=gb2312“ /》
《title》纺织科技协会《/title》
《/head》
《!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN“ “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd“》
《html xmlns=“http://www.w3.org/1999/xhtml“》
《head》
《meta http-equiv=“Content-Type“ content=“text/html; charset=utf-8“ /》
《title》www.52css.com《/title》
《style type=“text/css“》
《!--
#nav {
width:90%;
height:30px;
background-color: #99CCCC;
text-align:center;
}
#nav_main{/*增加的一个选择器*/
margin:0 auto;
width:640px;/*下面的#nav li 中width*个数即80*8=640*/
}
#nav ul {
font-size: 12px;
color: #FFF;
line-height: 30px;
white-space: nowrap;
margin:0px;
}
#nav li {
list-style-type: none;
float:left;/*我改了,这个在导航条中很经常使用*/
width:80px;/*我改了*/
padding:0px;
margin:0px;
}
#nav li a {
display:block;/*我改了*/
width:80px;/*我改了*/
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
padding:0px;
color: #FFF;
}
#nav li a:hover {
color:#000033;
background-color: #FFFFCC ;
height:30px;
}
.STYLE1 {
font-size: 24px;
font-weight: bold;
}
.STYLE3 {
color: #000033;
font-size: 18px;
}
.STYLE4 {
font-size: 16px;
font-weight: bold;
color: #333366;
}
.STYLE6 {font-size: 18px}
.STYLE7 {
font-size: 16px;
font-weight: bold;
color: #003366;
}
.STYLE9 {font-size: 12px}
.STYLE10 {font-size: 12}
.clear{
clear:both;
}
--》
《/style》
《/head》
《body》
《div id=“nav“》
《div id=“nav_main“》
《ul》
《li》《a href=“http://www.52css.com/“》业界动态《/a》《/li》
《li》《a href=“http://www.52css.com/“》最新活动《/a》《/li》
《li》《a href=“http://www.52css.com/“》下载专区《/a》《/li》
《li》《a href=“http://www.52css.com/“》相关知识 《/a》《/li》
《li》《a href=“http://www.52css.com/“》历史回顾《/a》《/li》
《li》《a href=“http://www.52css.com/“》联系我们《/a》《/li》
《li》《a href=“http://www.52css.com/“》关于我们《/a》《/li》
《li》《a href=“http://www.52css.com/“》TS论坛《/a》《/li》
《/ul》
《/div》
《/div》
《/body》
《/html》
CSS中导航栏居中问题
1、请问怎么样把导航栏居中显示
你首先要跟导航栏定义一个固定的宽度，一般为了支持1024*768，宽度是760-980之间为好。然后再加一句居中的代码就可以了。具体如：
#nav {
width:800px;
margin:0 auto;
height:26px;
border-bottom:2px solid #2788da;
background-color:red;
}
2、把每个a之间的距离缩短
修改【#nav li a】里面【margin-left:45px;】把45改成10或者更小即可
还有疑问请补充
Bootstrap导航条如何居中和两端对齐
margin-left:auto;margin-right:auto;左右对齐。
margin:0 auto;居中对齐。
bootstrap总只要是含有container类名的div都是可以居中的无论在什么设备中。
导航条：
导航条（navbar）和的导航（nav），就相差一个字，多了一个“条”字。其实在Bootstrap框架中他们还是明显的区别。
在导航条(navbar)中有一个背景色（显示更突出）、而且导航条可以是纯链接（类似导航），也可以是表单，还有就是表单和导航一起结合等多种形式。在这一节中将一起探讨Bootstrap框架中导航条的使用。
导航条和导航一样，在Bootstrap框架中是一个独立组件，所以你也可以根据自己的需求使用不同的版本：
LESS版本：对应的源文件navbar.less
Sass版本：对应的源文件_navbar.scss编译后的版本：查看bootstrap.css文件第3642行～第4111行（注意这个所说的Bootstrap版本是3.1.1，其它版本位置是不一致的）。
如何让css设计的导航栏居中显示
1、首先设置
body
{
margin:0
auto;
text-align:center;
}
2、再设置1个BOX让他居中，包裹即可
如：.box{margin:0
auto;
width:100%;}
3、包裹此导航条所有代码
《div
class=“box“》导航条所有代码《/div》
完成居中
