如何居中一个设置了浮动的元素

来源:转载

对于一个没有浮动的元素,我们通常可以通过对其设置margin:0 auto;来实现元素的居中,但是这个方法对于浮动元素却失去了作用,其实我们可以理解的是,在脱离文档流后,浮动的力量其实就是auto的力量,所以他它会自动向左浮动。

那么,此情此景,应该怎么样来实现居中的效果呢?仔细考虑,会有这样一个方法。

首先给此元素设置一个宽度值,先设置它的 margin-left:50%,这个时候元素的左边缘正好位于其父元素的中央,然后设置其position:relative;left:负本元素宽度的一半,这样的目的是将本元素向左移动其宽度的一半,这个时候可保证本元素的中间点位于父元素的中央。垂直居中:display: table-cell;vertical-align: middle;实例代码如下:

<!DOCTYPE html><html><head> <title>居中一个浮动元素</title> <style type="text/css"> .content{ height: 500px; width: 500px; border: 1px solid red; /*垂直居中*/ display: table-cell; vertical-align: middle; } .left{ height:100px; width: 100px; border: 1px dashed blue; /*水平居中,但设置浮动后失效 margin: 0 auto;*/ float: left; /*水平居中*/ margin-left: 50%; position: relative; left: -50px; } </style></head><body> <div class="content"> <div class="left"></div> </div></body></html>

效果如下:

分享给朋友:
您可能感兴趣的文章:
随机阅读: