HTML/CSS:div水平与元素垂直居中(2)
单个div水平居中:设置margin的左右边距为自动
div水平和垂直居中,text-align和vertical-align不起作用,因为标签div没有这两个属性,所以再css中设置这两个值不能居中的效果
代码:
HTML
<div id="parent"> </div>
CSS
#parent {
margin: 0 auto;
}
多个div水平居中:设置display的属性为inline-block
多个div水平居中,text-align和vertical-align不起作用,因为标签div块没有这两个属性,所以需要先使用display进行块级的调整
代码:
HTML
<div class="imgs">
<div class="img">
<a><img src=" " /></a>
<div class="desc">在此处添加对图像的描述</div>
</div> <div class="img">
<a><img src=" " /></a>
<div class="desc">在此处添加对图像的描述</div>
</div> <div class="img">
<a><img src=" " /></a>
<div class="desc">在此处添加对图像的描述</div>
</div>
</div>
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
<div id="parent">
<div id="child">Text here</div>
</div>
CSS
#child {
text-align: center; /*文字水平居中*/
line-height: 200px; /*文字垂直居中*/
}
适用:单行图片
代码:
HTML
<div id="parent">
<img src="data:image.png" alt="" />
</div>
CSS
#parent {
text-align: center; /*图片水平居中*/
line-height: 200px;
}
#parent img {
vertical-align: middle;
}
2.Table Method 表格法
适用:通用
代码:
HTML
<div id="parent">
<div id="child">Content here</div>
</div>
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
<div id="parent">
<div id="child">Content here</div>
</div>
CSS
#parent {
text-align: center; /*内容水平居中*/
padding: 5% 0;
}
#child {
padding: 10% 0;
}
HTML/CSS:div水平与元素垂直居中(2)的更多相关文章
- 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低版本中,虽然大致上没有问题,但还是有一些细微的显示问题. 示例如下: <!D ...
- css实现div水平垂直居中
中秋快到了,祝大家中秋快乐. 平时大家写bug过程中肯定会遇到让div框水平或者垂直居中,然而有时候能居中,有时候不能居中.我把平时遇到的一些方法写出来,如果对你有用,那便是晴天. 1.text-al ...
随机推荐
- Hash碰撞概率
计算Hash冲突的概率 虽然已经很多可以选择的Hash函数,但创建一个好的Hash函数仍然是一个活跃的研究领域.一些Hash函数是快的,一些是慢的,一些Hash值均匀地分布在值域上,一些不是.对于我们 ...
- springboot自动装配(1)---@SpringBootApplication注解怎么自动装配各种组件
1.对于springboot个人认为它就是整合了各种组件,然后提供对应的自动装配和启动器(starter) 2.@SpringBootApplication注解其实就是组合注解,通过它找到自动装配的注 ...
- 2019-2020年值得关注的9个AR发展趋势
作者Andrew Makarov,由计算机视觉life编辑:乔媛媛编译 更好的阅读体验请看首发原文链接 2019-2020年值得关注的9个AR发展趋势 增强现实技术在2019年实现了创纪录的发展.微软 ...
- 基于SpringCloud的Microservices架构实战案例-架构拆解
自第一篇< 基于SpringCloud的Microservices架构实战案例-序篇>发表出来后,差不多有半年时间了,一直也没有接着拆分完,有如读本书一样,也是需要契机的,还是要把未完成的 ...
- windbg 配置符号路径
(转)WINDBG的符号下载与符号路径问题 安装与配置 windbg 的 symbol (符号) 本篇是新手自己写的一点心得.建议新手看看.同时希望前辈多多指教. 写这篇的动机:在网上找了一上午的 w ...
- GO学习笔记 - 命令行解析
本文主题:基于os.Args与flag实现Golang命令行解析. 小慢哥的原创文章,欢迎转载 目录 ▪ 一. os.Args ▪ 二. flag ▪ 三. 结合os.Args与flag实现子命令 ▪ ...
- 个人永久性免费-Excel催化剂功能第56波-获取Excel对象属性相关自定义函数
之前零散开发过一些自定义函数获取Excel对象属性,此次再细细地把有价值的属性都一一给开发完成,某些场景下,有这些小函数还是可以比较方便地实现一些通过Excel界面没法轻松获取到的信息. 修复与更新 ...
- win10 安装mysql(图文详情)避免卡在最后一步
win10 安装mysql 本人安装mysql一般都是在镜像文件夹中下载(http://mirrors.sohu.com/),最近系统重做了之后安装mysql5.5.msi,可以安装成功.但是在最后的 ...
- Linux版本划分——基于打包方式
基于Dpkg (Debian系) Debian GNU / Linux是一种强调使用自由软件的发行版.它支持多种硬件平台.Debian及其派生发行版使用deb软件包格式,并使用dpkg及其前端作为包管 ...
- CentOS 下编译安装MySQL
CnetOS 下编译安装 MySql 查看是否存在旧版本: rpm -qa | grep mysql 卸载旧版本: rpm -e mysql #普通删除模式 rpm -e --nodeps mys ...