水平居中分为 行内元素的水平居中 和 块状元素的水平居中(块状元素又分为定宽块状元素和不定款块状元素)
一、行内元素居中
像文本图片等行内元素,居中是在其父元素中加 text-align:center; 来实现
.a{ border:1px solid red;
text-align:center; }
div 就是 文本“我要居中”的父元素, 文本“我要居中”,就会水平居中
二、定宽块状元素
width 已经定了的块状元素 ,通过给他设置 margin: 0 auto; 来实现
.a{ border:1px solid red;
width:300px;
margin: 0 auto;}
class 为a的div就会实现水平居中
三、不定宽块状元素
三种方法实现 :
1、加入table标签,利用table标签的长度自适应,--即不定义其长度也不默认父元素bodyd的长度,table的长度根据其内文本长度决定。因此可看成一个定宽度块状元素,然后设置margin: 0 auto;
|
table{ margin: 0 auto;}
2、将其设置为行内元素,display:inline; 然后用对行列元素居中的方法让其居中
设置我所在的div容器水平居中
.wrap{
background:#ccc;
display:inline;
}
.father{
text-align:center;
}
3. 通过给父元素设置float,然后给父元素设置 position:relative 和 left:50%,子元素设置 position:relative 和 left: -50% 来实现水平居中。
.wrap-center{
background:#ccc;
position:relative;
right:50%;
}
.father{
float:left;
position:relative;
left:50%;
}