图片上下左右居中
2015-11-11 09:59
351 查看
<style> body{ margin: 0; padding: 0; } /*方法一*/ .box{ position: relative; width: 300px; height: 300px; border: 1px solid red; } .box img{ position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; } /*方法二*/ .box { display: table-cell; vertical-align:middle; text-align:center; width:200px; height:200px; border: 1px solid red; } .box img{ vertical-align: middle; } /*方法三*/ .box{ width: 300px; height: 300px; border: 1px solid red; position: relative; } .box img{ width: 100px; height: 100px; background-color: black; position: absolute; left: 50%; top: 50%; margin-top: -50px; margin-left: -50px; } </style> <body> <div class="box"> <img src="images/public/logo_s.png"> </div> </body>
参考:/article/5062183.html
相关文章推荐
- (NO.00003)iOS游戏简单的机器人投射游戏成形记(十五)
- asp.net 信息管理系统中的需填写数据的键值对获取方法
- win10预览版10586怎么升级?win10 10240升级10586的图文教程
- Java中equals和==的区别
- ios的一些开源资源
- (NO.00003)iOS游戏简单的机器人投射游戏成形记(十五)
- (NO.00003)iOS游戏简单的机器人投射游戏成形记(十五)
- JVM解析01-平台无关性
- 杂谈学习的一点经验
- Zookeeper-Zookeeper client
- unity3d热更新解决方案,使用ulua插件开发的框架。
- 链表中头指针和头结点
- mfc对话框类中多线程
- 动态数据源的绑定
- 动态数据源的绑定
- 我们系统目前的问题 java的cvs系统
- Openfire3.10.2源码在eclipse上部署编译
- Zookeeper-Zookeeper leader选举
- SharePoint Web Part 客户端管理工具
- python3.4安装pydelicious