单个div水平居中:设置margin的左右边距为自动
div水平和垂直居中,text-align和vertical-align不起作用,因为标签div没有这两个属性,所以再css中设置这两个值不能居中的效果
代码:
HTML
CSS
#parent {
margin: 0 auto;
}
多个div水平居中:设置display的属性为inline-block
多个div水平居中,text-align和vertical-align不起作用,因为标签div块没有这两个属性,所以需要先使用display进行块级的调整
代码:
HTML
CSS
.imgs {
background-color: #F5F5DC;
text-align: center;
}
.img {
display: inline-block;
}
div 元素垂直+水平居中
利用CSS进行元素的水平居中,比较简单,行级元素设置其父元素的text-align center,块级元素设置其本身的left 和 right margins为auto即可。下列每一种适用于不同的情况,在实际的使用过程中选择某一种方法即可。
1.Line-Height Method 行高法
适用:单行文本
代码:
HTML
CSS
#child {
text-align: center; /*文字水平居中*/
line-height: 200px; /*文字垂直居中*/
}
适用:单行图片
代码:
HTML
CSS
#parent {
text-align: center; /*图片水平居中*/
line-height: 200px;
}
#parent img {
vertical-align: middle;
}
2.Table Method 表格法
适用:通用
代码:
HTML
CSS
#parent {
display: table;
margin: 0 auto; /*div水平居中*/
text-align: center; /*内容水平居中*/
}
#child {
display: table-cell;
vertical-align: middle;
}
低版本 IE fix bug 需添加:
#child {
display: inline-block;
}
3.Equal Top and Bottom Padding 内边距法
适用:通用
代码:
HTML
CSS
#parent {
text-align: center; /*内容水平居中*/
padding: 5% 0;
}
#child {
padding: 10% 0;
}
DIV块中 元素垂直居中
1 DIV块中 元素垂直居中 作者:知乎用户链接:https://www.zhihu.com/question/20543196/answer/99429177来源:知乎著作权归作者所有.商业转载请联 ...
css3设置box-pack和box-align让div里面的元素垂直居中
只要设置元素的box-pack和box-align即可,这两个属性当前只有webkit和moz支持,要设置垂直居中的话只需要将这两个属性的值都设置为center即可,需要的朋友可以参考下 以前处理 ...
CSS div水平垂直居中和div置于底部
一.水平居中 .hor_center { margin: 0 auto; } 二.水平垂直居中 .content { width: 360px; height: 240px; } .ver_hor_c ...
CSS:使用CSS3将一个div水平和垂直居中显示
使用css3将一个div水平和垂直居中显示 方案一: div绝对定位水平垂直居中[margin:auto实现绝对定位元素的居中], 代码两个关键点:1.上下左右均0位置定位: 2.margin: au ...
HTML/CSS:div居中和div内部元素垂直居中(1)
div居中 div水平和垂直居中,text-align和vertical-align不起作用,因为标签div没有这两个属性,所以再css中设置这两个值不能居中的效果 1. div水平居中:设置marg ...
CSS中怎么设置元素水平垂直居中?
记录怎么使用text-align与vertical-align属性设置元素在容器中垂直居中对齐.text-align与vertical-align虽然都是设置元素内部对齐方式的,但两者的用法还是有略微 ...
css 文字和子元素水平垂直居中
关于水平垂直居中,这是一个很简单的问题,但是很多时候,往往简单的东西,反而做不出来.这就是基础不扎实的缘故吧,我参照一些资料,总结了水平垂直居中的几种方法如下: 1 .文字水平垂直居中 这个比较简单, ...
DIV水平垂直居中的CSS兼容写法
DIV水平垂直居中,非IE浏览器可以用CSS3来处理,IE浏览器中分别处理IE6和/IE7.IE8.IE9. 在IE低版本中,虽然大致上没有问题,但还是有一些细微的显示问题. 示例如下:
css实现div水平垂直居中
中秋快到了,祝大家中秋快乐. 平时大家写bug过程中肯定会遇到让div框水平或者垂直居中,然而有时候能居中,有时候不能居中.我把平时遇到的一些方法写出来,如果对你有用,那便是晴天. 1.text-al ...
随机推荐
sql编程篇 (五) 事务
计算机中的事务 编辑 概念 事务(Transaction)是访问并可能更新数据库中各种数据项的一个程序执行单元(unit).事务通常由高级数据库操纵语言或编程语言(如SQL,C++或Java)书写的用 ...
警告:隐式声明与内建函数'exit'不兼容解决方案
警告:隐式声明与内建函数'exit'不兼容解决方案 #include int main() { printf("hello world!/n"); ...
linux命令每日一练习-rmdir mv
rmdir 删除一个空的文件夹,当目标文件夹非空的时候不能删除 mv 移动文件或目录 mv source target mv -i *** *** 如果目标文件存在则询问是否覆盖 mv -f *** ...
UILabel的简单用法和实际操作
1.UILabel **//设置文字 label.text = @"欢迎收看灌篮高手,我是安溪教练";**//设置文字颜色label.textColor = [UIColor ...
Django自身的CBV列表
慢慢就有感觉了.... 这个是可以快速开发很多东东,不过,类视图要求的积累还是有一些的.. ~~~~~~~~~~~~~ CBVs在功能上的可扩展性, 牺牲的是简单性, 一个CBV最多的时候拥有8个im ...
[jAudio] JAVA上经典特征提取工具
1.下载Jar包后引入 现在的问题是jAudio通常是给人UI进行操作的,直接使用怎么办? 看了源码,发现特征提取是通过类之间交叉调用实现的,是否有办法整合一下?
OpenGL杂七杂八
Projection Matrix 投影矩阵 3D -> 2D PFD_DOUBLEBUFFER 双缓冲 在图形图象处理编程过程中,双缓冲是一种基本的技术.我们知道,如果窗体在响应WM_PAIN ...
sqlplus命令行登录oracle数据库的N种方法盘点
欢迎访问我的个人博客IT废柴,本文永久链接移至:sqlplus命令行登录oracle数据库的N种方法盘点 sqlplus有几种登陆方式Oracle数据库, 比如: 1.以操作系统权限认证的oracle ...
理解去中心化 稳定币 DAI
本文转载于深入浅出区块链, 原文链接 随着摩根大通推出JPM Coin 稳定币,可以预见稳定币将成为区块链落地的一大助推器. 坦白来讲,对于一个程序员的我来讲(不懂一点专业经济和金融),理解DAI的机 ...
C++ 抽象类与接口
1. 抽象类 在面向对象编程中,抽象类是一种只能定义类型,不能生成对象的类,它是对一系列看上去不同,但是本质相同的具体概念的抽象.最典型的的抽象类就是”图形”,三角形.矩形.梯形都是图形,它们都具有 ...