实现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 ...
随机推荐
- ACM差分约束笔记
https://www.cnblogs.com/31415926535x/p/10463112.html 很早之前学最短路的时候就看了一眼差分约束,,当时以为这种问题不怎么会出现,,而且当时为了只为了 ...
- STL中实现 iterator trail 的编程技巧
STL中实现 iterator trail 的编程技巧 <泛型编程和 STL>笔记及思考. 这篇文章主要记录在 STL 中迭代器设计过程中出现的编程技巧,围绕的 STL 主题为 (迭代器特 ...
- 用Python破解斗地主残局
相信大家都玩过斗地主,规则就不再介绍了. 直接上一张朋友圈看到的残局图: 这道题我刚看到时,曾尝试用手工来破解,每次都以为找到了农民的必胜策略时,最后都发现其实农民跑不掉.由于手工破解无法穷尽所有可能 ...
- 2331: [SCOI2011]地板 插头DP
国际惯例的题面:十分显然的插头DP.由于R*C<=100,所以min(R,C)<=10,然后就可以愉悦地状压啦.我们用三进制状压,0表示没有插头,1表示有一个必须延伸至少一格且拐弯的插头, ...
- HDU.3032.Nim or not Nim？(博弈论 Lasker's Nim)
题目链接 \(Description\) 有多堆石子, 每次可以将任意一堆拿走任意个或者将这一堆分成非空的两堆, 拿走最后一颗石子的人胜利.问谁会获得胜利. \(Solution\) Lasker's ...
- bootStrap中的ul导航2
<!doctype html><html > <head> <meta charset="utf-8"> <link rel= ...
- java运行时could not open ........jvm.cfg问题的解决
我相信这个问题肯定让不少人头疼.小编也纠结了将近3个小时的时间,终于弄明白这是怎么回事并且解决 java都知道时运行命令,不能打开...jvm.cfg很明显是jre虚拟机出现了问题(要么时jre的路径 ...
- tableview 选中一行后，不显示选中颜色
tableview 选中一行后,不显示选中颜色 千万不要将tableview的allowsSelection设置成NO,那样的话可能导致tableview不能响应点击动作. 应该使用:cell.sel ...
- C++调用matlab函数
C++与matlab混合编程——C++调用MATLAB函数 笔者最近在从事一个MFC相关的项目,要求将用Matlab实现的算法通过应用MFC制作成一个小应用.其中有一部分内容需要求一个多元函数的最值. ...
- WCF：又是枚举惹的祸
在WCF中使用枚举不便于服务的演化,因为增加一个枚举值,需要更新所有客户端.某种程度上说这也带来了好处,即:防止了新增枚举值带来的意外(宁可失败,也不意外). 鉴于枚举的这种表现,以后尽可能的采用in ...