怎么让ul中的li居中显示？
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了怎么让ul中的li居中显示？相关的知识，希望对你有一定的参考价值。
ul的高度是30px;li中的字是18px，但是li中的字是浮在顶层的，怎么能让他们在中间的位置呢？
利用li的浮动固定宽度来实现，li的默认display为block，将这个属性改为inline就可以让ul li居中。
例：
<style type="text/css">#bNav
margin-top:10px;
background:#D9EBF5;
text-align:center;
#bNav ul
padding:4px 0;
margin:0;
overflow:hidden;
#bNav ul li
display:inline;
padding:0;
</style>
<div id="bNav" class="bNav">
<ul>
<li><a href="#" title="Home">公司主页</a></li>
<li>|</li>
<li><a href="#" title="About Us">About Us</a></li>
<li>|</li>
<li><a href="#" title="形象设计">形象设计</a></li>
<li>|</li>
<li><a href="#" title="艺术天地">艺术天地</a></li>
<li>|</li>
<li><a href="#" title="Contact Us">Contact Us</a></li>
<li>|</li>
<li><a href="#" title="应用开发">应用开发</a></li>
<li>|</li>
<li><a href="#" title="工作服务">工作服务</a></li>
<li>|</li>
<li><a href="#" title="申请链接">申请链接</a></li>
</ul>
</div> 参考技术A 利用li的浮动固定宽度来实现，li的默认display为block，将这个属性改为inline就可以让ul
li居中。
例：
<style type="text/css">
#bNav
margin-top:10px;
background:#D9EBF5;
text-align:center;
#bNav ul
padding:4px 0;
margin:0;
overflow:hidden;
#bNav ul li
display:inline;
padding:0;
</style>
<div id="bNav" class="bNav">
<ul>
<li><a href="#" title="Home">公司主页</a></li>
<li>|</li>
<li><a href="#" title="About Us">About Us</a></li>
<li>|</li>
<li><a href="#" title="形象设计">形象设计</a></li>
<li>|</li>
<li><a href="#" title="艺术天地">艺术天地</a></li>
<li>|</li>
<li><a href="#" title="Contact Us">Contact Us</a></li>
<li>|</li>
<li><a href="#" title="应用开发">应用开发</a></li>
<li>|</li>
<li><a href="#" title="工作服务">工作服务</a></li>
<li>|</li>
<li><a href="#" title="申请链接">申请链接</a></li>
</ul>
</div> 参考技术B li
line-height:30px;
本回答被提问者采纳
html 让文本 靠底部
html让文本靠底部的办法。如下参考：
1、超文本标记语言是WWW的描述语言。设计HTML语言的目的是为了能把存放在一台电脑中的文本或图形与另一台电脑中的文本或图形方便地联系在一起，形成有机的整体，人们不用考虑具体信息是在当前电脑上还是在网络的其它电脑上。
2、想要让文字在底部，需要用到 position:fixed; bottom:0px; left:0px;，想要让文字居中，需要用到 text-align:center。
3、代码
<div class="div_foot">
©2017-2018
</div>
.div_foot
position: absolute;
height: 50px;
text-align: center;
line-height: 50px;
width: 100%;
扩展资料
HTML的编辑器
1、基本文本、文档编辑软件，使用微软自带的记事本或写字板都可以编写，当然，如果你用WPS来编写，也可以。不过存盘时请使用.htm或.html作为扩展名，这样就方便浏览器认出直接解释执行了。
2、半所见即所得软件，
如：FCK-Editer、E-webediter等在线网页编辑器；
3、所见即所得软件，使用最广泛的编辑器，完全可以一点不懂HTML的知识就可以做出网页，如：
AMAYA（出品单位：万维网联盟）；
FRONTPAGE（出品单位：微软）；
Dreamweaver（出品单位：Adobe）。
参考资料：
百度百科-HTML
1、利用网页设计工具例如dreamwaver可以像word那样编辑，你可以实现你想要的结果，不需要懂技术；如果熟悉点html，通过设置表格的单元格对齐也可以实现；
2、具体的代码如下：
<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en""">
<html xmlns="">
<style type="text/css">
#a
#a #y
/*padding:10px 10px 10px 10px;*/
width:480px;
float:left;
clear:left;
border:1px #999999 solid;
#a #x
width:480px;
/*margin-left:550px;*/
float:right;
clear:right;
border:1px #999999 solid;
</style>
<head>
<meta http-equive="content-type" content="text/html;charset=gb2312">
<title></title>
<link href="3.css" type="text/css" rel="stylesheet" />
</head>
<body>
<div id="a">
<div id="y"> 文本2 </div>
<div id="x">
<marquee behavior=scroll direction=up align=bottom height="80px" />
文本1
</marquee>
</div>
</div>
</body>
</html>
2、直接将代码复制出来，建立txt文档；然后保存格式为.html就可以应用了。（如下图）
方法一
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>CSS实现文字底部对齐</title>
<style type="text/css">
#txt
height:300px;
width:300px;
border:1px solid #333333;
position:relative
#txt p
position:absolute;
bottom:0px;
padding:0px;
margin:0px
</style>
</head>
<body>
<div id="txt">
<p><a href="#" target="_blank">百度知道</a></p>
</div>
</body>
</html>
方法二:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>CSS实现文字底部对齐</title>
<style type="text/css">
#txt
height:300px;
width:300px;
border:1px solid #333333;
position:relative
#txt p
position:absolute;
bottom:0px;
padding:0px;
margin:0px
</style>
</head>
<body>
<div id="txt">
<p><a href="#" target="_blank">百度知道</a></p>
</div>
</body>
</html>
方法三:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>CSS实现文字底部对齐</title>
<style type="text/css">
#txt
height:300px;
width:300px;
border:1px solid #333333;
position:relative
#txt p
position:absolute;
bottom:0px;
padding:0px;
margin:0px
</style>
</head>
<body>
<div id="txt">
<p><a href="#" target="_blank">百度知道</a></p>
</div>
</body>
</html> 参考技术C 下面这个代码就可以：
<div style='position:absolute;top:expression(this.offsetParent.scrollTop+this.offsetParent.clientHeight-20);'>
一二三四
</div>
如果你的DIV不是在BODY里面，有需要调整。 参考技术D <!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en"
"">
<html xmlns="">
<style type="text/css">
#a
#a #y
/*padding:10px 10px 10px 10px;*/
width:480px;
float:left;
clear:left;
border:1px #999999 solid;
#a #x
width:480px;
/*margin-left:550px;*/
float:right;
clear:right;
border:1px #999999 solid;
</style>
<head>
<meta http-equive="content-type" content="text/html;charset=gb2312">
<title></title>
<link href="3.css" type="text/css" rel="stylesheet" />
</head>
<body>
<div id="a">
<div id="y"> 文本2 </div>
<div id="x">
<marquee behavior=scroll direction=up align=bottom height="80px" />
文本1
</marquee>
</div>
</div>
</body>
</html>
代码如上。
以上是关于怎么让ul中的li居中显示？的主要内容，如果未能解决你的问题，请参考以下文章