让标签li里面的文字居中？

时间：2022-12-09 00:12:42


<style type="text/css">
.div{
	position: relative;
	background-color: #fff;
	font-size:14px;
	z-index:1000;
	WIDTH: 490px;
	height:205px;
	margin:0 auto;
	top:260px;
	left:30px;
}

a{font-size:14px;}
ul{list-style:none;padding-top:80px; margin:auto;text-align:center;}
li{width:85px; text-align:center;line-height:30px;margin:0 13px;display:inline;}
</style>




<div class="div">
<ul  >
<li><a href="#">关键词关键1</a></li>
<li><a href="#">关键词关键2</a></li>
<li><a href="#">关键词关键3</a></li>
<li><a href="#">关键词关键4</a></li>
<li><a href="#">关键词关键5</a></li>
<li><a href="#">关键词关键6</a></li>
<li><a href="#">关键词关键7</a></li>
<li><a href="#">关键词关键8</a></li>
<li><a href="#">关键词关键9</a></li>
<li><a href="#">关键词关键10</a></li>
</ul>
</div>



要让li里面的字居中，5个为一列，但是不知道怎么居中总是有问题，

这个是IE6上面显示的，下面的是IE8上面显示的，不知道怎么成这样的，希望CSS的高手帮忙看一下，要怎么改，在IE6和IE8上都居中，也是5个为一列
让标签li里面的文字居中？

让标签li里面的文字居中？

20 个解决方案

#1

我本地的图片怎么上传不了呀，我的就是在IE6上面可以，在IE8上面不行

#2

CSS标准不一样，在页面头部加：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
如果都加了，就再去看看css的兼容性吧。

#3

我的页面上面有这个头部呀！

#4

页面上有头部，但是，还是不行的呀？急呀~~~~

#5

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
.div{
	height:200px;
	text-align:center;
	position: relative;
    background-color: #fff;
    font-size:14px;
    z-index:1000;
    width: 490px;
    margin:0 auto;
    top:260px;
    left:30px;
}

ul{
	margin:10px 0; padding:0;
}
li{
	margin:0;
	padding:0;
	list-style:none;
	display:inline;
	width:95px;
	line-height:30px;
}
a{
	font-size:14px;}
</style>
</head>
<body>
<div class="div">
	<ul  >
		<li><a href="#">关键词关键1</a></li>
		<li><a href="#">关键词关键2</a></li>
		<li><a href="#">关键词关键3</a></li>
		<li><a href="#">关键词关键4</a></li>
		<li><a href="#">关键词关键5</a></li>
		<li><a href="#">关键词关键6</a></li>
		<li><a href="#">关键词关键7</a></li>
		<li><a href="#">关键词关键8</a></li>
		<li><a href="#">关键词关键9</a></li>
		<li><a href="#">关键词关键10</a></li>
	</ul>
</div>
</body>
</html>

#6

lz实在抱歉，之前发的代码没有在FF中测试。
下面是我的正解： 

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
.div{
	height:200px;
	text-align:center;
	position: relative;
    background-color: #fff;
    font-size:14px;
    z-index:1000;
    width: 490px;
    margin:0 auto;
    top:260px;
    left:30px;
	cursor:pointer;
	border:solid 1px green;
}

ul{
	margin:10px 0; padding:0;
	list-style:none;
}
li{
	display:inline-block;
	width:97px;
	float:left;
}
a{
	font-size:14px;}
</style>
</head>
<body>
<div class="div">
	<ul  >
		<li><a href="#">关键词关键1</a></li>
		<li><a href="#">关键词关键2</a></li>
		<li><a href="#">关键词关键3</a></li>
		<li><a href="#">关键词关键4</a></li>
		<li><a href="#">关键词关键5</a></li>
		<li><a href="#">关键词关键6</a></li>
		<li><a href="#">关键词关键7</a></li>
		<li><a href="#">关键词关键8</a></li>
		<li><a href="#">关键词关键9</a></li>
		<li><a href="#">关键词关键10</a></li>
	</ul>
</div>
</body>
</html>

#7

引用 5 楼 lxh060204 的回复:
HTML code
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
.div{
    height……


这一个居中了，但是我是想5个为一列的呀，要固定多了或少了，都不行的呀，能不能再帮忙改一下，谢谢啦，自己对CSS还是初学者，还希望高手多指导！

#8

引用 6 楼 lxh060204 的回复:
lz实在抱歉，之前发的代码没有在FF中测试。
下面是我的正解：


HTML code
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<sty……

谢谢你了呀，马上结贴的！

#9

引用 6 楼 lxh060204 的回复:
lz实在抱歉，之前发的代码没有在FF中测试。
下面是我的正解：


HTML code
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<sty……

如果只有一个的话，怎么没有居中呀

#10

text-align:center
试试这个属性看行不行！

#11

引用 10 楼 muheye 的回复:
text-align:center
试试这个属性看行不行！

试了的，都不行，有一个float:left;  但是去掉float:left;就不能5个为一列了

#12

都没有高手来呀，55555~~~~~~~~~

#13

把样式改成这样，试试看，应该是你要的效果
<style type="text/css">
.div{
    position: relative;
    background-color: #fff;
    font-size:14px;
    z-index:1000;
    WIDTH: 270px;
*width: 240px;
    height:205px;
    margin:0 auto;
    top:260px;
    left:30px;
}

a{font-size:14px;}
ul{list-style:none;padding-top:80px; margin:auto;}
li{width:85px; text-align:center;line-height:30px;margin:0 13px;display:inline;}
</style>

#14

引用 13 楼 miyacnn 的回复:
把样式改成这样，试试看，应该是你要的效果
<style type="text/css">
.div{
  position: relative;
  background-color: #fff;
  font-size:14px;
  z-index:1000;
  WIDTH: 270px;
*width: 240px;
  height:205px;
  margin:0……


这个，好像不是的呀！

#15

 关键词关键1    关键词关键2
 关键词关键3    关键词关键4
 关键词关键5    关键词关键6
关键词关键7     关键词关键8
关键词关键9     关键词关键10


你是不是要这样的效果呀？给个效果图

#16

引用 11 楼 chenjing1104 的回复:
试了的，都不行，有一个float:left; 但是去掉float:left;就不能5个为一列了

关于这个问题我没有更好的见解，不过lz可以通过其他方法实现（舍弃li)： 

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
.div{
    height:200px;
    text-align:center;
    position: relative;
    background-color: #fff;
    font-size:14px;
    z-index:1000;
    width: 490px;
    margin:0 auto;
    top:260px;
    left:30px;
    cursor:pointer;
    border:solid 1px green;
}
a{
    font-size:14px;
	width:90px;
	padding:5px 0;
	display:inline-block;
	}
</style>
</head>
<body>
<div class="div">
	<a href="#">关键词关键1</a>
	<a href="#">关键词关键2</a>
	<a href="#">关键词关键3</a>
	<a href="#">关键词关键4</a>
	<a href="#">关键词关键5</a>
	<a href="#">关键词关键6</a>
	<a href="#">关键词关键7</a>
	<a href="#">关键词关键8</a>
	<a href="#">关键词关键9</a>
	<a href="#">关键词关键10</a>
	<a href="#">关键词关键11</a>
</div>
</body>
</html>

#17

5个一列和5个一行，你们都怎么分的呢

#18

引用 15 楼 miyacnn 的回复:
关键词关键1 关键词关键2
 关键词关键3 关键词关键4
 关键词关键5 关键词关键6
关键词关键7 关键词关键8
关键词关键9 关键词关键10


你是不是要这样的效果呀？给个效果图


关键词关键1 关键词关键2  关键词关键3  关键词关键4   关键词关键5

关键词关键1 关键词关键2  关键词关键3  关键词关键4   关键词关键5
5个为一列的，

#19

<style type="text/css">
.div{
    position: relative;
    background-color: #fff;
    font-size:14px;
    z-index:1000;
    width: 606px;
*width:550px;
    height:205px;
    margin:0 auto;
    top:260px;
    left:30px;
}

a{font-size:14px;}
ul{list-style:none;padding-top:80px; margin:auto;}
li{width:85px; text-align:center;line-height:30px;margin:0 13px;display:inline;}
</style>

这个叫五个为一行

#20

哇，都过去一年了，还是回个贴吧
设定li的高度跟  Div的高度一致，例如你的这个 text-align:center;line-height:30px，加个float:left。 还有指定div 的高度也是30px，接着转化你的a标签display:block;给a标签指定高度30px;记住不是li标签是a标签，再看看是不是都居中了呢。

#21

#1

我本地的图片怎么上传不了呀，我的就是在IE6上面可以，在IE8上面不行

#2

CSS标准不一样，在页面头部加：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
如果都加了，就再去看看css的兼容性吧。

#3

我的页面上面有这个头部呀！

#4

页面上有头部，但是，还是不行的呀？急呀~~~~

#5

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
.div{
	height:200px;
	text-align:center;
	position: relative;
    background-color: #fff;
    font-size:14px;
    z-index:1000;
    width: 490px;
    margin:0 auto;
    top:260px;
    left:30px;
}

ul{
	margin:10px 0; padding:0;
}
li{
	margin:0;
	padding:0;
	list-style:none;
	display:inline;
	width:95px;
	line-height:30px;
}
a{
	font-size:14px;}
</style>
</head>
<body>
<div class="div">
	<ul  >
		<li><a href="#">关键词关键1</a></li>
		<li><a href="#">关键词关键2</a></li>
		<li><a href="#">关键词关键3</a></li>
		<li><a href="#">关键词关键4</a></li>
		<li><a href="#">关键词关键5</a></li>
		<li><a href="#">关键词关键6</a></li>
		<li><a href="#">关键词关键7</a></li>
		<li><a href="#">关键词关键8</a></li>
		<li><a href="#">关键词关键9</a></li>
		<li><a href="#">关键词关键10</a></li>
	</ul>
</div>
</body>
</html>

#6

lz实在抱歉，之前发的代码没有在FF中测试。
下面是我的正解： 

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
.div{
	height:200px;
	text-align:center;
	position: relative;
    background-color: #fff;
    font-size:14px;
    z-index:1000;
    width: 490px;
    margin:0 auto;
    top:260px;
    left:30px;
	cursor:pointer;
	border:solid 1px green;
}

ul{
	margin:10px 0; padding:0;
	list-style:none;
}
li{
	display:inline-block;
	width:97px;
	float:left;
}
a{
	font-size:14px;}
</style>
</head>
<body>
<div class="div">
	<ul  >
		<li><a href="#">关键词关键1</a></li>
		<li><a href="#">关键词关键2</a></li>
		<li><a href="#">关键词关键3</a></li>
		<li><a href="#">关键词关键4</a></li>
		<li><a href="#">关键词关键5</a></li>
		<li><a href="#">关键词关键6</a></li>
		<li><a href="#">关键词关键7</a></li>
		<li><a href="#">关键词关键8</a></li>
		<li><a href="#">关键词关键9</a></li>
		<li><a href="#">关键词关键10</a></li>
	</ul>
</div>
</body>
</html>

#7

引用 5 楼 lxh060204 的回复:
HTML code
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
.div{
    height……


这一个居中了，但是我是想5个为一列的呀，要固定多了或少了，都不行的呀，能不能再帮忙改一下，谢谢啦，自己对CSS还是初学者，还希望高手多指导！

#8

引用 6 楼 lxh060204 的回复:
lz实在抱歉，之前发的代码没有在FF中测试。
下面是我的正解：


HTML code
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<sty……

谢谢你了呀，马上结贴的！

#9

引用 6 楼 lxh060204 的回复:
lz实在抱歉，之前发的代码没有在FF中测试。
下面是我的正解：


HTML code
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<sty……

如果只有一个的话，怎么没有居中呀

#10

text-align:center
试试这个属性看行不行！

#11

引用 10 楼 muheye 的回复:
text-align:center
试试这个属性看行不行！

试了的，都不行，有一个float:left;  但是去掉float:left;就不能5个为一列了

#12

都没有高手来呀，55555~~~~~~~~~

#13

把样式改成这样，试试看，应该是你要的效果
<style type="text/css">
.div{
    position: relative;
    background-color: #fff;
    font-size:14px;
    z-index:1000;
    WIDTH: 270px;
*width: 240px;
    height:205px;
    margin:0 auto;
    top:260px;
    left:30px;
}

a{font-size:14px;}
ul{list-style:none;padding-top:80px; margin:auto;}
li{width:85px; text-align:center;line-height:30px;margin:0 13px;display:inline;}
</style>

#14

引用 13 楼 miyacnn 的回复:
把样式改成这样，试试看，应该是你要的效果
<style type="text/css">
.div{
  position: relative;
  background-color: #fff;
  font-size:14px;
  z-index:1000;
  WIDTH: 270px;
*width: 240px;
  height:205px;
  margin:0……


这个，好像不是的呀！

#15

 关键词关键1    关键词关键2
 关键词关键3    关键词关键4
 关键词关键5    关键词关键6
关键词关键7     关键词关键8
关键词关键9     关键词关键10


你是不是要这样的效果呀？给个效果图

#16

引用 11 楼 chenjing1104 的回复:
试了的，都不行，有一个float:left; 但是去掉float:left;就不能5个为一列了

关于这个问题我没有更好的见解，不过lz可以通过其他方法实现（舍弃li)： 

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
.div{
    height:200px;
    text-align:center;
    position: relative;
    background-color: #fff;
    font-size:14px;
    z-index:1000;
    width: 490px;
    margin:0 auto;
    top:260px;
    left:30px;
    cursor:pointer;
    border:solid 1px green;
}
a{
    font-size:14px;
	width:90px;
	padding:5px 0;
	display:inline-block;
	}
</style>
</head>
<body>
<div class="div">
	<a href="#">关键词关键1</a>
	<a href="#">关键词关键2</a>
	<a href="#">关键词关键3</a>
	<a href="#">关键词关键4</a>
	<a href="#">关键词关键5</a>
	<a href="#">关键词关键6</a>
	<a href="#">关键词关键7</a>
	<a href="#">关键词关键8</a>
	<a href="#">关键词关键9</a>
	<a href="#">关键词关键10</a>
	<a href="#">关键词关键11</a>
</div>
</body>
</html>

#17

5个一列和5个一行，你们都怎么分的呢

#18

引用 15 楼 miyacnn 的回复:
关键词关键1 关键词关键2
 关键词关键3 关键词关键4
 关键词关键5 关键词关键6
关键词关键7 关键词关键8
关键词关键9 关键词关键10


你是不是要这样的效果呀？给个效果图


关键词关键1 关键词关键2  关键词关键3  关键词关键4   关键词关键5

关键词关键1 关键词关键2  关键词关键3  关键词关键4   关键词关键5
5个为一列的，

#19

<style type="text/css">
.div{
    position: relative;
    background-color: #fff;
    font-size:14px;
    z-index:1000;
    width: 606px;
*width:550px;
    height:205px;
    margin:0 auto;
    top:260px;
    left:30px;
}

a{font-size:14px;}
ul{list-style:none;padding-top:80px; margin:auto;}
li{width:85px; text-align:center;line-height:30px;margin:0 13px;display:inline;}
</style>

这个叫五个为一行

#20

哇，都过去一年了，还是回个贴吧
设定li的高度跟  Div的高度一致，例如你的这个 text-align:center;line-height:30px，加个float:left。 还有指定div 的高度也是30px，接着转化你的a标签display:block;给a标签指定高度30px;记住不是li标签是a标签，再看看是不是都居中了呢。

#21

标签：

相关文章