2-9习题我不知道怎么对内容的居中

<style type="text/css">
*{margin:0;padding:0;}
body{margin:0;padding:0;}
.top{width:100%;height:100px;
     background:black;position:fixed;}
.top-left{float:left;                                 text-height:100px;}
.top-right{width:100%;
           height:100px;
           color:white;
            
           }
.top-right ul{list-style-type:none;font-size:24px;font-weight:bold; float:right; }
.top-right li{display:inline;line-height:100px;}
 
.content{width:100%;
         height:600px;
         background:#09F;float:left;padding-top:100px;
         }
.content-left{width:40%;height:auto;background:#09F;margin:auto;float:left;padding-left:10%;
margin-top:50px;}
.content-right{width:40%;height:auto;float:left;padding-left:10%;margin-top:50px;}
.content ul{list-style-type:none; float:left; }
.contnt li{display:inline;}
span{background:#F99;}
.bottom{width:100%;height:100px;
     background:black;position:fixed;
     bottom:0;color:white;
     text-align:center;}
 
.bottom ul{list-style-type:none;font-size:24px;font-weight:bold;  }
.bottom li{display:inline;line-height:100px;}
 
</style>
</head>
 
<body>
<!--页面头部-->
<div class="top">
<div class="top-left"><img src="http://img1.sycdn.imooc.com/climg//58c0d2d900016ce303000100.png" /></div>
<div class="top-right">
<ul>
<li>课程&nbsp;&nbsp;&nbsp;</li>
<li>提问&nbsp;&nbsp;&nbsp;</li>
<li>职业路径&nbsp;&nbsp;&nbsp;</li>
<li>实战&nbsp;&nbsp;&nbsp;</li>
<li>手记&nbsp;&nbsp;&nbsp;</li>
</ul>
</div>
</div>
<!--页面内容-->
<div class="content">
<!--页面内容左-->
<div class="content-left">
<h2>课程推荐</h2>
<ul>
<li><span>职业路径</span>&nbsp;&nbsp;&nbsp;html5与css3实现动态网页</li>
<li><span>职业路径</span>&nbsp;&nbsp;&nbsp;0基础入门android语法和界面</li>
<li><span>职业路径</span>&nbsp;&nbsp;&nbsp;ios基础语法与常用控件</li>
<li><span>职业路径</span>&nbsp;&nbsp;&nbsp;php入门开发</li>
<li><span>职业路径</span>&nbsp;&nbsp;&nbsp;Java入门开发</li>
</ul>
</div>
<!--页面内容右-->
<div class="content-right">
<h2>相关课程</h2>
<ul>
<li>html&nbsp;&nbsp;&nbsp;css&nbsp;&nbsp;&nbsp;javascript</li>
<li>html5&nbsp;&nbsp;&nbsp;&nbsp;css3&nbsp;&nbsp;&nbsp;&nbsp;jquery</li>
<li>移动端基础&nbsp;&nbsp;&nbsp;&nbsp;移动端app开发</li>
</ul>
</div></div>
<!--页面尾部-->
<div class="bottom">
<ul>
<li>网站首页</li>
<li>企业合作</li>
<li>友情链接</li>
<li>人才招聘</li>
<li>意见反馈</li>
 
</ul></div>
 
</body>
</html

慕侠8355565 2018-02-01

源自：CSS网页布局基础 2-10 编程练习

收起

1回答

bbbboom 2018-02-01 18:49:39

你是想实现哪一部分内容的居中呢？可以说清楚一点吗？

收起回答

提问者慕侠8355565 #1

盒子content-left里内容的居中，要每行首字能垂直对齐哦

2018-02-02 13:30:09
bbbboom 回复提问者慕侠8355565 #2

你可以给content-left盒子里面的ul设置固定的宽高，用margin居中显示，再设置h2标题的padding-left值就可以了，看一下我修改的代码： h2 { padding-left: 30%; } .content-left ul { width: 40%; margin: 0 auto; } .content-left ul li { margin-top: 20px; } ヾ(◍°∇°◍)ﾉﾞ

2018-02-02 13:51:11
提问者慕侠8355565 回复 bbbboom #3

谢谢啦，ok了

2018-02-02 18:47:33