左浮动和右浮动里的元素怎样垂直、水平居中。设定了最小宽度。把浏览器缩小一定比例的时布局全部乱了

<head>
    <meta charset="UTF-8">
    <title>Document</title>
	<style type="text/css">
		*{
			padding: 0;
			margin: 0;
		}
		body{min-width: 900px;}
		.header,
		.footer{
			width: 100%;
			height: 100px;
			background: #000000;
			text-align: center;
			float: left;
			line-height: 100px;
		}
		.logo{
			float: left;
		}
		.nav{
			float: right;
			line-height: 100px;
			word-spacing: 20px;
			margin-right: 30px;
		}
		ul li{
			font-family: "微软雅黑";
			color: #fff;
			display: inline;
		}
		.container{
			padding: 0 300px 0 400px;
		}
		.left,
		.middle,
		.right{
			position: relative;
			min-height: 600px;
			float: left;
		}
		.middle{
			width: 100%;
			background: #FF9999;
		}
		.middle img{
			position: absolute;
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
			margin: auto;
		}
		.left{
			width: 400px;
			background: #FFCC99;
			margin-left: -100%;
			left: -400px;
		}

		.left-li span{
			background: #FF9999;
		}
		.right{
			width: 300px;
			background: #CCFFFF;
			margin-left: -300px;
			right: -300px;
		}
		.f-nav{
			word-spacing: 30px;
		}
	</style>
</head>
<body>
	<div class="header">
		<div class="logo">
			<img src="http://climg.mukewang.com/590037f600016ce303000100.png" />
		</div>
		<div class="nav">
			<ul>
				<li>课程</li>
				<li>职业路径</li>
				<li>实战</li>
				<li>猿问</li>
				<li>手记</li>
			</ul>
		</div>
	</div>
	<div class="container">
		<div class="middle">
			<img src="http://climg.mukewang.com/590037e00001fab706000400.jpg" />
		</div>
		<div class="left">
			<div class="left-li">
				<h2>课程推荐</h2>
				<div class="left-li"><span>职业路径</span>&nbsp;HTML5与CSS3实现动态网页</div>
			    <div class="left-li"><span>职业路径</span>&nbsp;零基础入门Android语法与界面</div>
			    <div class="left-li"><span>职业路径</span>&nbsp;ios基础语法与常用控件</div>
			    <div class="left-li"><span>职业路径</span>&nbsp;PHP入门开发</div>
			    <div class="left-li"><span>职业路径</span>&nbsp;JAVA入门开发</div>
			 </div>
		</div>
		<div class="right">	
			<div class="login">		
		        <h2>登陆</h2>
				<div><input type="text" name="login-name" placeholder="请输入登陆邮箱/手机号"></div>
				<div><input type="password" name="login-name" placeholder="6-16位密码，区分大小写，不能用空格" size="16"></div>
				<div><input type="image" name="login-name" value="登陆" src="img\banner.jpg"></div>
			</div>
		</div>
	</div>
	<div class="footer">
		<div class="f-nav">
			<ul>
				<li>网站首页</li>
				<li>企业合作</li>
				<li>人才招聘</li>
				<li>友情链接</li>
				<li>联系我们</li>
				<li>常见问题</li>
			</ul>
		</div>
	</div>
</body>

Miss时刻想你

浏览 2264回答 3

左浮动和右浮动里的元素怎样垂直、水平居中。设定了最小宽度。把浏览器缩小一定比例的时布局全部乱了

3回答