CSS-布局【1】-图片在div中垂直居中
2016-04-01 12:02
525 查看
方法一:通过增加100%高度行内块居中对齐
方法二:通过table/table-cell样式居中
方法三:设置为背景图片居中
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width" /> <title></title> <style type="text/css"> div{ width: 600px; height: 220px; text-align: center; border: 1px solid red; } span{ height: 100%; display: inline-block; vertical-align: middle; } img{ vertical-align: middle; } </style> </head> <body> <div> <span></span><img src="demo.jpg"> </div> </body> </html>
方法二:通过table/table-cell样式居中
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width" /> <title></title> <style type="text/css"> div{ width: 600px; height: 220px; text-align: center; border: 1px solid red; display: table; } span{ display: table-cell; vertical-align: middle; } img{ vertical-align: middle; } </style> </head> <body> <div class="container"> <span><img src="demo.jpg"></span> </div> </body> </html>
方法三:设置为背景图片居中
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width" /> <title></title> <style type="text/css"> div{ width: 600px; height: 220px; text-align: center; border: 1px solid red; background-image: url('demo.jpg'); background-repeat: no-repeat; background-position: center; } </style> </head> <body> <div> </div> </body> </html>
相关文章推荐
- 简单掌握CSS3中resize属性的用法
- CSS裁剪属性clip使用的实例教程
- 关于图标和文字对齐的方法整理。
- 今天是愚人节。(Today is April Fools' Day.)网页需要倾斜o(∩_∩)o
- CSS三列布局之左右宽度固定,中间元素自适应问题
- 【F2E】浏览器样式重置(reset.css)
- 使用CSSgram来实现类似Instagram上的简单的滤镜效果
- 登录页面重定向后页面样式丢失
- 登录页面重定向后页面样式丢失
- 自定义checkbox样式
- css选择器的优先级
- css居中那些事
- web常用样式初始化css
- HTML CSS——margin与padding的初学
- CSS position属性和实例应用
- Beyond Compare如何修改对比字体样式
- Less系列之数学函数
- Html+CSS 多列等高布局 padding补偿法 《精通CSS高级WEB标准解决方案》读书笔记
- CSS导航菜单水平居中的多种方法
- 浅谈css背景