css学习笔记之水平居中
来源:互联网 发布:iphone se 知乎 编辑:程序博客网 时间:2024/05/19 03:17
学习来源:http://www.cnblogs.com/xiaohuochai/p/5437503.html
text-align
在父元素中设置text-align:center实现行内元素水平居中,若子元素为块级元素,将子元素设置为display:inline-block,使子元素变成行内元素。
若要兼容IE7-浏览器,可使用display:inline;zoom:1;来达到inline-block的效果
[注意] 子元素的text-align继承了父元素的center,文字也居中显示,所以需要在子元素中设置text-align:left。
margin
在本身元素设置margin: 0 auto实现块级元素水平居中。但是块级元素默认是占满一行的。
1)若未设置宽度,将(div)元素设置为display:table,使元素成为块级元素,同时table还具有包裹性,宽度由内容撑开
若要兼容IE7-浏览器,可把child的结构换成<table class="child">DEMO</table>
2)若设置宽度,直接使用即可。
absolute
1)配合relative
relative数值型的偏移属性是相对于自身的,但百分比却是相对于包含块的。需要在子元素外面和父元素之间在增加一层<div>结构,使其宽度与子元素宽度相同,用来当做包含块。
.parent{
position: relative;
}
.childWrap{
position: absolute;
left: 50%; //以窗口宽度 偏移到中间位置 但是是最左侧在中间 整体并未在中间 多往右了child的一半
}
.child{
position: relative;
left: -50%; //childWrap的宽度和child一样 往左回偏一半的宽度
}
<div class="parent" style="background-color: gray;height: 20px;">
<div class="childWrap">
<div class="child" style="background-color: lightblue;">DEMO</div>
</div>
</div>
[注意]该方法全兼容,但是增加了html结构
flex
使用弹性盒模型flex实现水平居中
[注意]IE9-浏览器不支持
1)在伸缩容器上设置主轴对齐方式justify-content:center
2)在伸缩项目上设置margin: 0 auto
- css学习笔记之水平居中
- CSS之水平垂直居中
- CSS之水平垂直居中
- HTML和CSS学习日记之水平居中设置
- CSS布局学习笔记之图片居中
- css学习笔记之垂直居中
- css定位“十字架“之水平垂直居中
- 解读CSS布局之-水平垂直居中
- CSS布局之水平垂直居中
- css布局之水平垂直居中
- 解读CSS布局之-水平垂直居中
- CSS布局之水平垂直居中
- 解读 CSS 布局之水平垂直居中
- CSS布局之-水平垂直居中
- CSS之元素水平/垂直居中问题
- 解读 CSS 布局之水平垂直居中
- 解读 CSS 布局之水平垂直居中
- CSS之图片水平垂直居中总结
- react native 震动 Vibration 使用详解
- DSP28335官方例程Control Suit(1)——LED实验
- java基础复习--复习总结11
- C++位运算
- Idea for Mac 快捷键
- css学习笔记之水平居中
- HDU6069 Counting Divisors 区间素数筛法
- Java基础一:关键字、标示符、变量、常量和数据类型转换
- 微信sdk使用
- 归并排序
- 线性代数 -- 列空间、零空间
- Linux 中 Oracle dmp 文件导入命令
- 欢迎使用CSDN-markdown编辑器
- 最大连续子序列