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

来源：互联网发布：php比较好的书籍编辑：程序博客网时间：2024/06/03 16:55

　　对于一个没有浮动的元素，我们通常可以通过对其设置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>

效果如下：
这里写图片描述

阅读全文

0 0