实现div里的img图片水平垂直居中
body结构
<body>
<div>
<img src="1.jpg" alt="haha">
</div>
</body>
方法一：
将display设置成table-cell，然后水平居中设置text-align为center，垂直居中设置vertical-align为middle。
<style type="text/css">
*{margin: 0;padding: 0;}
div{
width:150px;
height: 100px;
display: table-cell;
vertical-align: middle;
text-align: center;
border:1px solid #000;
}
img {
width: 50px;
height: 50px;
}
</style>
结果如下图所示：
方法二：
通过position定位来实现。将div设置成相对定位relative，将img设置成绝对定位absolute，left:50%，top:50%，此时图片的左上角位于div的中心，要是图片的中心位于div的中心，就需要将图片向上移动图片高度的一半，并向左移动图片宽度的一半。
<style type="text/css">
*{margin: 0;padding:0;}
div{
width:150px;
height: 100px;
position: relative;
border:1px solid #000;
}
img {
width: 50px;
height: 50px;
position: absolute;
top: 50%;
left: 50%;
margin-top: -25px; /* 高度的一半 */
margin-left: -25px; /* 宽度的一半 */
}
</style>
结果如下图所示：
实现div里的img图片水平垂直居中的更多相关文章
- CSS制作图片水平垂直居中
所谓的图片水平垂直居中就是把图片放在一个容器元素中(容器大于图片尺寸或是指定了大小的容器),并且图片位居此容器正中间(中间是指元素容器的正中间),而图片不是以背景图片(background-image ...
- 图片水平垂直居中（兼容IE6，IE7，firefox，opera，safari，其中图片可以是任何块元素）
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- css实现图片水平垂直居中
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 关于div中图片水平垂直居中的问题
最近在做一个项目,里面涉及到不固定尺寸要在div里面水平垂直居中显示 我没有用table布局,而是用了div+css,找了很久,终于在网上找到解决方案,特此记录备用 关键核心代码如下: <div ...
- CSS制作图片水平垂直居中 亲测推荐
空白标签实现图片的垂直居中 这种方法很有意思,也很有独特之处,我的思路也是来自于张鑫旭-鑫空间-鑫生活写的<大小不固定的图片.多行文字的水平垂直居中>一文中的使用空白图片实现垂直对齐.他主 ...
- CSS中图片水平垂直居中方法小结
写页面时难免会遇到水平垂直居中的问题,总结一下最近使用的方法. 一.使用垂直居中和水平居中 <div id="div1"> <img src="img/ ...
- DIV以及图片水平垂直居中兼容多种浏览器
纯css完美地解决图片以及div垂直水平居中,兼容IE7.0.IE6.0.IE5.5.IE5.0.FF.Opera.Safari具体实现css 如下,感兴趣的朋友可以参考下哈 第一种:全CSS控制 ...
- 纯CSS实现图片水平垂直居中于DIV（图片未知宽高）
<div class="demo"><a href="#"><img src="http://nec.netease.c ...
- 未知宽高图片水平垂直居中在div
<BODY> <div class="box"> <span class="car"></span> <i ...
随机推荐
- 搭建elasticsearch可视化插件
一,搭建本地elasticsearch服务 具体搭建流程,可以参考博客:https://www.cnblogs.com/vipchenwei/p/9156668.html elasticsearch搭 ...
- 每日踩坑 2019-04-09 Web.config configuration 蓝色波浪线 未声明 configuration 标签的解决办法
百度看了几篇答案都没有给出解决方案,看了看 MSDN. https://docs.microsoft.com/zh-cn/previous-versions/ms228147(v=vs.110) 似乎 ...
- 洛谷.3437.[POI2006]TET-Tetris 3D(二维线段树)
题目链接 下落一个d*s的方块,则要在这个平面区域找一个最高的h' 更新整个平面区域的值为h+h' 对于本题,维护最大高度h和all 对于平面的x轴维护一棵线段树t1,每个t1的节点维护对应y轴的两棵 ...
- 2007 ACM 平方和立方和
题目:http://acm.hdu.edu.cn/showproblem.php?pid=2007 注意审题就好,x可以>y; #include<stdio.h> int main( ...
- 支付宝sdk集成过程中报 openssl/asn1.h file not found错误的解决办法
当你把文件导入到了这个工程目录下 :项目名称/library/Alipay/openssl ,中间是隔了几个文件夹 的 那么在Header Search Paths 的设置就得改为 $(SRC ...
- python 元组和字典中元素作为函数调用参数传递
模式1. def test1(*args): test3(*args) def test2(**kargs): test3(**kargs) def test3(a, b): print(a,b) ...
- spring cloud: 使用consul来替换config server
上一篇提到了,eureka 2.x官方停止更新后,可以用consul来替代,如果采用consul的话,其实config server也没必要继续使用了,consul自带kv存储,完全可以取代confi ...
- c++内存管理的一些资料
C++内存分配方式详解--堆.栈.自由存储区.全局/静态存储区和常量存储区 如何动态调用DLL中的导出类 在dll中导出类,并结合继承带来的问题 如何更好的架构一个界面库,欢迎大家一起讨论 pim ...
- 让你提升命令行效率的 Bash 快捷键 [完整版]
转自:http://linuxtoy.org/archives/bash-shortcuts.html 生活在 Bash shell 中,熟记以下快捷键,将极大的提高你的命令行操作效率. 大部分对其他 ...
- ASP.NET Web API中通过URI显示实体中的部分字段
有时候我们可能不想显示某个实体中的所有字段.比如客户端发出如下请求: locaohost:43321/api/groups/1/items?fields=idlocaohost:43321/api/g ...