html里面的li里面文字怎样都居中呢？？
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了html里面的li里面文字怎样都居中呢？？相关的知识，希望对你有一定的参考价值。
水平居中
<!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=utf-8" />
<title>无标题文档</title>
<style type="text/css">
#city li
display:block;
float:left;
height:30px;
width:70px;
background:blue;
list-sytle:none;
</style>
<script>
</script>
</head>
<body>
<ul id="city">
<li>北京</li>
<li>天津</li>
<li>石家庄</li>
<li>重庆</li>
<li>广州</li>
<li>珠海</li>
</ul>
</body>
</html>
1、首先打开可以编写前端代码的编辑器，新建一个test.html文件，HTML文件是前端页面文件，可以在浏览器直接打开查看效果。新建文件后写入基本的代码，如图所示。
2、接下来在body标签里面写入一个div标签，并在里面写一个ul标签，ul里面包含四个li标签，并写上1111,2222,3333,4444的文本。同时，还有写入id或class属性，以便于后面设置样式。
3、上一步的效果如图所示，可以看到，现在只是一个普通的列表，四个元素前面都有黑点。这是ul、li标签的默认样式。。
4、接着设置居中效果，在style标签里面写入如图所示代码，对元素的样式进行设置。
5、写入代码后，在浏览器里打开该文件，查看效果，如图所示，达到了居中的效果。
line-height: ？？px;
再设置
text-align: center; 参考技术B lidisplay:block;text-align:center;本回答被提问者采纳 参考技术C #city li
display:block;
float:left;
height:30px;
width:70px;
background:blue;
list-sytle:none;
text-align:left;
text-align:left;居左
text-align:center;居中
如果想让它再垂直居中呢？应该怎么办？？
追答#cityclear:both;width:70px;追问这样不对啊
高度固定，行数不固定的文字垂直居中问题
大家都知道，水平方向上的居中很好做到，text-align:center即可做到；垂直方向上的居中如果文字行数和高度都固定也很好实现，但是如果行数不固定呢？
最近，接到一个需求：高度固定，文字行数可能为一行、两行，但不管多少行，文字都要垂直居中。例如：
对于H5页面来说，CSS3的translate即可做到，其原理是外层div相对定位，里面的元素绝对定位，距离父容器的top值为50%，然后通过translate属性让它相对于自身向上移动50%。
其css为：
对于PC来说，就没这么好糊弄了：低版本浏览器不支持CSS3属性，那么我们应该怎么做呢？表格有一个特点是无论里面文字多少，内容都可以垂直居中。因此我们可以使用表格的方式 实现文本垂直居中，同理 我们可以用CSS来模拟表格垂直居中。而display：table可以做到：
不过低版本的IE浏览器不支持display:table，所以为了兼容IE浏览器，还需要使用css Hack来实现：
其css为：
这样，无论是在PC，还是在H5都能够实现高度固定、行数不固定的水平垂直居中了。
以上是关于html里面的li里面文字怎样都居中呢？？的主要内容，如果未能解决你的问题，请参考以下文章