老师，请问底部怎么中间对齐
请问，这个底部是如何实现中间对齐的
代码：
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Immoc</title>
</head>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
body{
min-width: 1000px;
}
ul{
list-style-type: none;
}
.header{
width: 100%;
height: 100px;
background: black;
}
.footer{
width: 100%;
height: 100px;
background: black;
position: relative;
}
.navi{
text-align: center;
color: white;
overflow: hidden;
}
.header,.footer{
float: left;
}
.header .navi{
float: right;
}
.footer .navi{
position: absolute;
height:100px;
width:1000px;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -500px;
}
.navi ul li{
float: left;
font-size: 20px;
padding: 40px 20px;
}
.navi ul li a:link, .navi ul li a:visited{
text-decoration: none;
color: white;
}
.navi ul li a:hover, .navi ul li a:active{
text-decoration: none;
color: red;
}
.content{
height: 1000px;
width: auto;
padding: 0px 200px 0px 300px;
}
.middle,.left,.right{
position: relative;
float: left;
min-height: 200px;
}
.middle{
height:100%;
width:100%;
background: rgb(246, 195, 203);
}
.left{
height:100%;
width:300px;
background: rgb(254, 238, 218);
margin-left: -100%;
left: -300px;
}
.right{
height:100%;
width:200px;
margin-left: -200px;
left:200px;
background: rgb(173, 216, 230);
}
.Recommendation{
position: absolute;
left: 20px;
top: 50px;
}
.title{
padding-bottom: 10px;
font-weight: bolder;
}
.Recommendation .inner li{
margin: 20px 0px;
}
.Recommendation .inner li .tag{
margin: 0px 20px;
background: #FE9897;
}
.Recommendation .inner li a:link, .Recommendation .inner li a:visited{
text-decoration: none;
color: black;
}
.Recommendation .inner li a:hover, .Recommendation .inner li a:active{
text-decoration: none;
color: red;
}
.middle img{
position: absolute;
top: 100px;
left: 50%;
margin-left: -301px;
}
.login{
position: absolute;
left: 20px;
top: 50px;
}
.login .inner .loginItem{
width: 100%;
height: 25px;
margin-bottom: 20px;
display: block;
}
.button{
background: red;
}
</style>
<body>
<div class="header">
<img src="http://img1.sycdn.imooc.com/climg//590037f600016ce303000100.png">
<div class="navi">
<ul>
<li><a href="#">Classes</a></li>
<li><a href="#">Pro</a></li>
<li><a href="#">Real world</a></li>
<li><a href="#">Ask</a></li>
<li><a href="#">Note</a></li>
</ul>
</div>
</div>
<div class="content">
<div class="middle">
<img src="http://img1.sycdn.imooc.com/climg//590037e00001fab706000400.jpg">
</div>
<div class="left">
<div class="Recommendation">
<h3 class="title">Route Recommondation:</h3>
<ul class="inner">
<li><a href="#"><span class="tag">Pro</span>HTML5 plus CSS3 Achive Animated Web Page</a></li>
<li><a href="#"><span class="tag">Pro</span>Android Syntax</a></li>
<li><a href="#"><span class="tag">Pro</span>IOS Basic API</a></li>
<li><a href="#"><span class="tag">Pro</span>PHP Entry</a></li>
<li><a href="#"><span class="tag">Pro</span>Java Entry</a></li>
</ul>
</div>
</div>
<div class="right">
<div class="login">
<h3 class="title">Login</h3>
<form class="inner">
<input class="loginItem" type="text" placeholder="Enter Username">
<input class="loginItem" type="password" placeholder="Enter Password">
<input class="loginItem button" type="submit" value="Log In">
</form>
</div>
</div>
</div>
<div class="footer">
<div class="navi">
<ul>
<li><a href="#">Home Page</a></li>
<li><a href="#">Cooperation</a></li>
<li><a href="#">Recruitment</a></li>
<li><a href="#">Contact Us</a></li>
<li><a href="#">Frequence Problem</a></li>
<li><a href="#">Friendly Link</a></li>
</ul>
</div>
</div>
</body>
</html>11
收起
正在回答 回答被采纳积分+1
2回答
homeletWei
2018-06-07 19:57:19
底部的div（class=“navi”）实现了中间对齐，但是里面的文字怎么实现中间对齐的？
相似问题
登录后可查看更多问答，登录/注册
前端小白入门系列课程
- 参与学习 人
- 提交作业 11218 份
- 解答问题 36712 个
从一个不会编程的小白到一个老司机是需要过程的，首先得入门，学习基础知识，然后才能进阶，最后再到精通，本专题是你走进前端世界的不二选择！
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星