网页元素居中攻略记_(6)图片水平垂直居中
2016-03-23 18:25
302 查看
前言
借助table的特性来实现
代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css" media="screen"> .test{ display:table; height:800px; width:800px; background:#99cc99; border-radius:5px; border:1px solid #f70; } .test>span{ display:table-cell; vertical-align:middle; text-align:center; } .test>span>img{ height:400px; width:400px; border-radius:50%; box-shadow:1px 1px 3px rgba(0,0,0,.5); } </style> </head> <body> <div class="test"> <span><img src="http://d.hiphotos.baidu.com/image/h%3D200/sign=8663264274f082023292963f7bfbfb8a/f3d3572c11dfa9eca13b947665d0f703918fc1be.jpg" alt=""></span> </div> </body> </html>
效果图
结语
用position来定位也可以…这里只是展示另一种图片居中的方式,,感觉相当方便相关文章推荐
- 按右键另存图片只能存BMP
- photoshop去除图片上的水印
- css支持标准的图片垂直居中
- upload上传单张图片
- 图片引发的溢出危机(图)
- C#实现把彩色图片灰度化代码分享
- C#将图片和字节流互相转换并显示到页面上
- C#监控文件夹并自动给图片文件打水印的方法
- 纯CSS实现的当鼠标移上图片添加阴影效果代码
- 如何使用C#从word文档中提取图片
- C#实现打开画图的同时载入图片、最大化显示画图窗体的方法
- C#图片添加水印的实现代码
- 随鼠标移动的图片或文字特效代码
- CSS 图片横向排列实现代码
- C#实现将Email地址转成图片显示的方法
- C#实现图片加相框的方法
- 超级经典一套鼠标控制左右滚动图片带自动翻滚
- 用css实现图片垂直居中的使用技巧
- 图片垂直居中之姊妹 DIV垂直居中
- C++实现读取图片长度和宽度