已知图片大小，让其在页面中垂直水平居中

昨天在做项目的时候，遇到一个图片水平垂直居中的问题，要解决这个问题笔者想到了一个很简单的办法。

首先我们把页面的框架做出来，上代码：

<html><head><title>图片水平垂直居中</title><style>.my_div{width:1000px;height:700px;border:1px solid red;position:relative;}.my_img{display:block;width:400px;height:300px;position:absolute;left:50%;             //绝对定位让图片距离左边50%top:50%;               //同上margin-left: -200px;        //还要减去图片宽度的一半margin-top:-150px;            //同上}</style></head><body><div class="my_div"><img class="my_img" src="weixin.png" /></div></body>
</html>

这样就实现了我们的要求了，大家仔细看嵌入到里边的css代码，不难发现，我把图片采用了绝对定位，让它的left和top都等于50%，但是这并不意味着图片就水平和垂直居中了，此时可以巧妙的才用负的margin（可能有很多小朋友还不知道margin有负的这种写法，不懂就问度娘吧）来减去图片宽高的一半，然后，目的就达到了，是不是 so easy 啊！

举一反三：不仅仅只适用于图片外边是div（盒子）的模型，还可以相对于整个窗口居中，都是类似的（让图片position:fised；就OK了）

转载于:https://blog.51cto.com/10271962/1717364

已知图片大小，让其在页面中垂直水平居中相关推荐

解决：“ScriptManager”不是已知元素。原因可能是网站中存在编译错误。
方法一: 我在工作中,将Micro的Ajax插件安装后,将ScriptManager,UpdatePanel控件拖入页面后,就会出现 "ScriptManager"不是已知元素.原 ...
已知前序（先序）与中序输出后序
已知前序(先序)与中序输出后序: 前序:1, 2, 3, 4, 5, 6(根左右) 中序:3, 2, 4, 1, 6, 5(左根右) 分析:因为前序(根左右)最先出现的总是根结点,所以令root为前序 ...
TensorFlow2-高阶操作（八）：gather/gather_nd（已知元素的位置，从张量中提取该元素）、scatter_nd/scatter_nd_update（已知赋值位置，向0张量中赋值）
一.gather/gather_nd(已知元素的位置,从张量中提取该元素) 1.tf.gather()函数 tf.gather(params, # 传入的tensorindices, # 指定的索引v ...
已知图片顶点坐标和点相对图片位置求点坐标
给一张各个角为直角的图片,已知东北角(NouthEast)西南角(Southwest)和西北角(Northwest)位置.图片中有一个点(一定于图片内),知道该点相对于图片的位置(从图片的左上顶点开始 ...
css已知图片宽度，如何让宽高相等
实际效果需求已知父元素(box)为一个正方形但不知道父元素实际尺寸(自适应) 现在需要往正方形里面放4张图片,且图片相互之间有留白实现方式先看dom结构: <body><d ...
【例题】已知二叉树的先序序列和中序序列构造二叉树
做下列例题之前请先转到:[教程]了解原理和方法.然后再做下面的例题. [例题1]一棵二叉树的先序遍历序列为EFHIGJK,中序遍历序列为HFIEJKG,则该二叉树根结点的右孩子为() A. H B. ...
元素“Button”不是已知元素。原因可能是网站中存在编译错误，或者缺少web.config文件...
最近开发的时候ASP控件都有波浪下划线,提示不是已知元素,搞得挺郁闷的.虽然不影响变异,不过就是不爽. 折腾N久...... 解决了,把FramWork平台换成3.5,问题解决,不知道为啥,求大神指点 ...
已知二叉树的后序序列和中序序列，求先序序列。
后续遍历=左子树,右子树,根,中序遍历=左子树,根,右子树已知二叉树后序遍历序列是DBCEFGHA,中序遍历序列EDCBAHFG,它的前序遍历的序列是? 由后序遍历序列是DBCEFGHA,可以看出整 ...
java中如何添加画板背景图,在AI中怎么把已知图片在新建画板时候作为画板的背景来建立画板啊！...
答:把这个要作为背景的图片(例如 A)拖到现在白色画板的中央,然后再在A的上面新建层,那就是以A为背景了. 答:吸引我的,不是它的内容,而是它的背景.这个背景用的是高斯模糊,看上去非常简洁大气. 所以 ...

已知图片大小，让其在页面中垂直水平居中

已知图片大小，让其在页面中垂直水平居中相关推荐

最新文章

热门文章