浮动元素居中显示

最新推荐文章于 2022-05-19 18:36:14 发布

cwzhsi

最新推荐文章于 2022-05-19 18:36:14 发布

阅读量941

点赞数

分类专栏： css 文章标签： float 居中显示 css

本文链接：https://blog.csdn.net/cwzhsi/article/details/44572157

版权

css 专栏收录该内容

28 篇文章 0 订阅

订阅专栏

方法一：

html代码如下：

<span style="font-size:12px;"><span style="white-space:pre">	</span><body>
		<h1>浮动元素水平居中</h1>
		<div class="wrap clearfix">
			<ul class="page">
				<li><a href="">网站建设</a>|</li>
				<li><a href="">网页素材</a>|</li>
				<li><a href="">网页特效</a>|</li>
				<li><a href="">设计分享</a>|</li>
				<li><a href="">建站教程</a>|</li>
				<li><a href="">网站模板</a>|</li>
				<li><a href="">酷站赏析</a></li>
			</ul>
		</div>
		<div class="clear"></div>
		<p class="end">供学习交流</p>
	</body></span>

css代码如下：

<span style="font-size:12px;"><span style="white-space:pre">		</span><style type="text/css" >
			body{
				margin:0 auto;
				padding:0;
				lisy-style:none;
				font-size:14px;
				font-family:Tahoma, Geneva, sans-serif;
				border:4px solid black;
				text-align:center;	
			}
			a{
				text-decoration:none;
			}
			<span style="color:#990000;"><strong>.clearfix:after{/*这样只能清除子元素的浮动，不能清除自身的浮动*/
				content:"";
				height:0;
				visibility:hidden;
				display:block;
			}
			.clearfix{
				zoom:1;
			}/*不加这一句也可以清除子元素的浮动*/</strong></span>
			h1{
				text-align:center;
				padding:10px;
				font-size:20px;
				margin:30px 0;
			}
			.wrap{
				position:relative;
				margin:20px auto;
				text-align:center;/*这两句在这里不能让li居中显示*/
				padding:10px 0;
				background:orange;
				overflow:hidden;
				
			}
			.page{
				/*text-align:center;这一句放在这里不能让元素居中显示*/
				float:left;
				position:relative;
				<span style="color:#cc0000;"><strong>left:50%;/*这一句放在这里让元素居中显示*/</strong></span>
			}
			.page li{
				float:left;
				position:relative;
				<span style="color:#cc0000;"><strong>right:50%;/*加上这一句再配合上面的left:50%  li元素才能真正的居中显示*/</strong></span>
				overflow:hidden;
				margin:0 5px;
			}
		</style></span>

总结：这里主要用到position:relative配合left:50%的技巧，兼容各浏览器，需要注意的是IE7下需要设置overflow:hidden;来解决无法设置子元素宽度的BUG。
注意，只有清楚li元素的浮动后，“供学习交流”才能居中显示。

方法二：

html代码如下：

<span style="font-size:12px;"><span style="white-space:pre">	</span><body>
		<h1>浮动元素水平居中</h1>
		<div class="wrap clearfix">
			<strong><span style="color:#990000;"><div class="inwrap"></span></strong>
				<ul class="page">
					<li><a href="">网站建设</a>|</li>
					<li><a href="">网页素材</a>|</li>
					<li><a href="">网页特效</a>|</li>
					<li><a href="">设计分享</a>|</li>
					<li><a href="">建站教程</a>|</li>
					<li><a href="">网站模板</a>|</li>
					<li><a href="">酷站赏析</a></li>
				</ul>
			</div>
		</div>
		<p class="end">供学习交流</p>
	</body></span>

css代码如下：

<span style="font-size:12px;"><span style="white-space:pre">		</span><style type="text/css" >
			body{
				margin:0 auto;
				padding:0;
				lisy-style:none;
				font-size:14px;
				font-family:Tahoma, Geneva, sans-serif;
				border:4px solid black;
				text-align:center;	
			}
			a{
				text-decoration:none;
			}
			.clearfix:after{/*这样只能清除子元素的浮动，不能清除自身的浮动*/
				content:"";
				height:0;
				visibility:hidden;
				display:block;
			}
			.clearfix{
				zoom:1;
			}/*不加这一句也可以清除子元素的浮动*/
			h1{
				text-align:center;
				padding:10px;
				font-size:20px;
				margin:30px 0;
			}
			.wrap{
				position:relative;
				margin:20px auto;
				text-align:center;/*这两句在这里不能让li居中显示*/
				padding:10px 0;
				background:orange;
				overflow:hidden;	
			}
			.inwrap{
				float:left;
				position:relative;
				<span style="color:#cc0000;"><strong>left:50%;</strong></span>
			}
			.page{
				/*text-align:center;这一句放在这里不能让元素居中显示，对于text-align属性，需要进一步学习*/
				float:left;
				position:relative;
				<strong><span style="color:#cc0000;">left:-50%;</span></strong>
				list-style:none;
			}
			.page li{
				float:left;
				margin:0 5px;
			}
			.page li a{
				float:left;
				display:block;	
			}
		</style></span>

总结：这种方法与第一种方法的不同之处在于，多套了一层div,left:-50%,更合理一些，可以避免一些不必要的IE BUG,这种float元素居中的方式可以扩展应用到很多元素中。

显示的结果图如下：

cwzhsi

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
浮动元素居中显示

方法一：html代码如下：浮动元素水平居中网站建设| 网页素材| 网页特效| 设计分享| 建站教程| 网站模板| 酷站赏析供学习交流 css代码如下： body{ margin:0 auto; padding:0; lisy-st
复制链接

扫一扫

专栏目录