前端修炼-->垂直居中
来源:互联网 发布:福利资源博客源码 编辑:程序博客网 时间:2024/04/27 23:33
一、 img 和 div 元素在父元素(div)内垂直居中
关键点:给img元素设置vertical-align: middle 样式之后,右边的div自动就居中了(与img元素在文本行中居中一个道理)!
html代码:
<div class="father"> <img class="left" src="image/p1.jpg" alt=""> <div class="right"> <div >垂直居中</div> <div >垂直居中</div> </div></div>
CSS样式:
<style type="text/css"> .father { border: 1px solid red; width: 50%; } .left { /*使img和div在父元素(DIV)框中垂直居中的关键*/ vertical-align: middle; } .right { display: inline-block; border: 1px solid green; }</style>
效果图:
二、高度不同的两个 div 元素在父元素(div)内垂直居中
关键点:将两个div孩子设置display:inline-block; 并设置vertical-align:middle;
html代码:
<div class="father"> <div class="child1"> <div >孩子1内容</div> <div >孩子1内容</div> </div> <div class="child2"> <div >孩子2内容</div> <div >孩子2内容</div> <div >孩子2内容</div> <div >孩子2内容</div> <div >孩子2内容</div> <div >孩子2内容</div> </div></div>
CSS样式
<style type="text/css"> .father { border: 1px solid red; width: 50%; text-align: center; } .child1 { display: inline-block; /*关键*/ border: 2px solid green; margin: 0 20px; vertical-align: middle; /*关键*/ } .child2 { display: inline-block; /*关键*/ border: 2px solid blue; margin: 0 20px; vertical-align: middle; /*关键*/ }</style>
效果图:
0 0
- 前端修炼-->垂直居中
- 百度Web前端技术学院--水平垂直居中
- 前端——水平垂直居中
- 前端div垂直水平居中网址
- web前端面试水平垂直居中详解
- 前端之css-垂直水平居中
- 前端水平居中以及垂直居中方法积累
- [前端开发] 垂直居中,flexbox/table-cell/absolute
- css实现垂直居中 + Yahoo前端优化十四条军规
- 前端面试储备——水平垂直居中
- 【前端】三种方法将文字垂直居中
- 前端小坑小坑css篇-div图片垂直居中
- 前端小白--CSS实现水平垂直居中
- 垂直居中
- 垂直居中
- 垂直居中
- 垂直居中
- 垂直居中
- Linux makefile 教程
- poj Flip game【DFS 枚举】
- docker 安装ubuntu
- windows系统下maven安装及eclipse配置maven插件
- butterknife7.0的使用
- 前端修炼-->垂直居中
- freeswitch优化
- Flip Game
- 我所理解的php缓冲机制及嵌套级别
- 获取系统联系人
- 一句代码调用注册通知事件+实现微信弹出/隐藏输入框
- Retrofit 使用心得 @GET@POST带参数不带参数
- linux awk命令详解
- [转]调用startActivityForResult后,onActivityResult为什么立刻响应