HTML中ul标签居中失效解决（web前端开发技术第三版第五
章的习题2）
在设置图⽚居中显⽰时，我试了很多办法,⽆论是align="center"还是text-align="center"，都不可以，后来查了⼀下百度，说⽤margin:0 auto可以，我试了⼀下还是没有变化,
后来我加了个宽度width:500px，才得以显⽰
这个宽度的数值可以根据需要设置，我设置400时是这样的:
但是我想这些图⽚在⼀⾏显⽰，所以将值改为了500，效果:
附上全部代码(也是web前端开发技术第三版第五章的习题):
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>桂林⼭⽔风景图⽚</title>
<style type="text/css">
img {
width: 100px;
height: 100px;
border: 0;
}
h3 {
color: #ff0000;
text-align: center;
}
ul {
list-style-type: none;
/*设置居中*/
margin:0 auto;
width:500px;
}
li {
display: inline;/* ⾏内显⽰ */
width: 120px;text align center
line-height: 30px;
float: left;
}
body{
text-align: center;
}
</style>
</head>
<body>
<h3>桂林⼭⽔风景图⽚</h3>
<ul>
<li><a href="image51.jpg" target="_top"><img src="image51.jpg" alt=""><br>桂林⼭⽔1<br></a></li>  <li><a href="image52.jpg"><img src="image52.jpg" alt=""><br>桂林⼭⽔2<br></a></li>
<li><a href="image53.jpg"><img src="image53.jpg" alt=""><br>桂林⼭⽔3<br></a></li>
<li><a href="image54.jpg"><img src="image54.jpg" alt=""><br>桂林⼭⽔4<br></a></li>
</ul>
</body>
</html>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。