CSS 居中
来源:互联网 发布:thinkpad知乎 编辑:程序博客网 时间:2024/05/17 07:48
左右居中对齐
1.div 居中
给自己添加margin属性,并给div设置宽度,没有宽度或者有浮动都不会居中
div { margin: auto; width: 60%;}
2.文本居中对齐
在父级的元素中添加text-align:属性
.div {
text-align: center;
}
3.图片居中
给自己添加display:block和margin属性,并放在margin中
img { display: block; margin: auto; width: 40%; /*有margin必须有auto*/}
4.使用绝对定位
父相对,子绝对
.parent {
position: relative;
width: 100%;
}
.child {
position: absolute;
left: 150px;
width: 300px;
background-color: #b0e0e6;
}
垂直居中对齐
1.父级元素中使用padding
div {
padding: 70px 0;
}
2.将line-height和父级的height设置为相同高度
div{
height: 100px;
line-height: 100px;
}
阅读全文
0 0
- CSS居中
- CSS居中
- css居中
- CSS居中
- css居中
- css 居中
- css 居中
- css居中
- [css] 居中
- css居中
- CSS居中
- css居中
- css居中
- CSS居中
- css居中
- CSS | 居中
- CSS居中
- CSS居中
- Node | docker 中安装node.js
- Docker | docker常用命令
- Node | Linux安装及部署
- GIT | 常用命令学习指南
- meta标签
- CSS 居中
- LTE下行物理层传输机制(1)-天线端口Antenna Port和小区特定参考信号CRS
- TensorFlow学习笔记1
- leetcode17-根据数字找到可能的按键字母组合
- 文件及数据流技术(二)
- nginx配置文件详解(优化)
- php 定义和引用变量 (一)
- js 对table 表单操作总结
- 解决table边框圆角无效