A5下载 - 努力做内容最丰富最安全的下载站!

A5站长下载站

当前位置:A5下载 > 网页制作 > 使用CSS居中浮动元素的方法

使用CSS居中浮动元素的方法

时间:2015-07-30 08:50作者:fang人气:72

方法一

设置容器的浮动方式为绝对定位

然后确定容器的宽高 比如宽500 高 300 的层

然后设置层的外边距

CSS Code

div{

width:500px;

height:300px;

margin:-150px 0 0 -250px;

position:absolute;

left:50%;

top:50%;

background-color:#000;

}

方法二

父元素和子元素同时左浮动,然后父元素相对左移动50%,再然后子元素相对右移动50%,或者子元素相对左移动-50%也就可以了。

CSS Code

<!DOCTYPE html><html><head>

<title>Demo</title>

<meta charset="utf-8"/>

<style type="text/css">

.p{

position:relative;

left:50%;

float:left;

}

.c{

position:relative;

float:left;

rightright:50%;

}

</style></head><body>

<div class="p">

<h1 class="c">Test Float Element Center</h1>

</div>

</body>

</html>

标签使用,CSS,居中,浮动,元素,方法,方法,设置,容器,浮动

相关下载

查看所有评论+

网友评论

网友
您的评论需要经过审核才能显示

公众号