Rumah > Artikel > hujung hadapan web > 使用CSS居中浮动元素的方法介绍
使用CSS居中浮动元素的方法介绍
- 高洛峰asal
- 2017-03-10 11:02:141975semak imbas
这篇文章主要介绍了使用CSS居中浮动元素的方法介绍,是CSS入门学习中的基础知识,需要的朋友可以参考下
方法一
设置容器的浮动方式为绝对定位
然后确定容器的宽高 比如宽500 高 300 的层
然后设置层的外边距
p{
width:500px;
height:300px;
margin:-150px 0 0 -250px;
position:absolute;
left:50%;
top:50%;
background-color:#000;
}方法二
父元素和子元素同时左浮动，然后父元素相对左移动50%，再然后子元素相对右移动50%，或者子元素相对左移动-50%也就可以了。
<!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>
<p class="p">
<h1 class="c">Test Float Element Center</h1>
</p>
</body>
</html>Atas ialah kandungan terperinci 使用CSS居中浮动元素的方法介绍. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：CSS基础教程：CSS图文混排，图像签名，多图拼接和图片特效示例Artikel seterusnya：将页脚固定在页面底部的CSS实战教程