网页布局时遇到的问题

<div id="dhlb_div">
	<center>
		<ul class="dhlb_ul">
			<li class="dhlb_li">首页</li>
			<li class="dhlb_li">新闻网</li>
			<li class="dhlb_li">学校概况</li>
			<li class="dhlb_li">机构设置</li>
			<li class="dhlb_li">师资队伍</li>
			<li class="dhlb_li">科学研究</li>
			<li class="dhlb_li">人才培养</li>
			<li class="dhlb_li">招生就业</li>
			<li class="dhlb_li">大学文化</li>
			<li class="dhlb_li">国际交流</li>
			<li class="dhlb_li">校友联盟</li>
		</ul>
	</center>
</div>

 

#dhlb_div{
	width: 100%;
	height: 39px;
	line-height: 40px;
	vertical-align: middle;/*垂直居中*/
}

 

.dhlb_ul{
	list-style-type: none;/*将无序列表前面的圆点去除*/
	text-align: center;/*文本居中*/
	width:1000px;
	height: 40px;
	line-height: 40px;/*行高*/
	vertical-align: middle;/*垂直居中*/
}
.dhlb_li{float: left;/*将列表向左飘*/
}

 刚开始将ul属性里面的宽度设置为百分比width：100%，结果无序列表随网页的缩放就会显示到最左端，后来将该值设置成固定值就可以实现了。将无序列表这个小框整体居中到div这个大框里，大框的宽度是设置的百分比，这时必须将小框的宽和高设死，这样不管网页放大还是缩小他才能在大框的中间位置。

 

转载于:https://www.cnblogs.com/wfc139/p/8562713.html