让HTML img垂直居中的三种办法:_麦田里的POLO桔的博客-程序员信息网_html让img图片居中

技术标签: CSS  css  前端面试题  HTML  html  

  • 声明:原文来自DIVCSS5,其次原文代码存在一些引起误解的地方,已经进行修改和测试,下文会注明引起误解的地方。主要收藏为方便下次阅读,故进行转发,如有侵权,请私聊本人,定立即删除。
  • 原文连接:DIVCSS5_让html img垂直居中的三种办法

 

让HTML img垂直居中的三种办法:

 

一、使用flex完成垂直居中

操纵css flex实现垂直居中。flex或许不是完成垂直居中最好的选择,由于IE8,9其实不赞成它。

那时,为了用flex实现垂直居中,我们起首要竖立一个包裹着图片的div元素,日后给它定义一些根基属性。

如下图片img宽度为(设置为)100px,高度为100px。

HTML代码部份:

<div class="flexbox">
    <img src="1.jpg" alt="">
</div>

CSS代码一部分:

.flexbox{
    width: 1000px;
    height: 1000px;
    background: pink;

    /* 给父元素添加下面这两个属性,即可让子元素的图片垂直居中,且父元素的 align-items: center 为不可缺少属性*/
    display: flex;  
    align-items: center
}

.flexbox img{
    width: 500px;
    /* align-items: center  此处并不需要这个属性,多余 */
}

 

浏览器运行效果:实现图片垂直居中布局
 

二、操作display: table;完成img图片垂直居中

HTML代码:

<div class="tablebox">
    <!-- 使用table/table-cell的方法一定要将子元素的图片包裹在一个块级元素的容器中  -->
    <div id="imgbox">
        <img src="1.jpg" alt="">
    </div>
</div>

CSS代码:

.tablebox{
    width: 1000px;
    height: 1000px;
    background: pink;

     /* 给父元素添加display:table属性 */
    display: table 
}

#imgbox{

    /* 给子元素(图片的容器)添加display:table-cell & vertical-align: middle;属性 */
    display: table-cell;  
    vertical-align: middle;
}

#imgbox img{
    width: 500px;
}

 

三、用绝对定位完成垂直居中(举荐-兼容性好)

HTML代码:

<div class="posdiv">
    <img src="1.jpg" alt="">
</div>

CSS代码:

.posdiv{
    width: 1000px;
    height: 1000px;
    background: pink;
    margin:0 auto

    /* 给父元素添加相对定位,让子元素相对父元素进行偏移 */
    position: relative; 
}

.posdiv img{
    width: 500px;

    /* 老生常谈的方法,先让子元素的上边界处于父元素中间线的位置,在让子元素向上偏移自身的50%即可 */
    position: absolute;
    top: 50%;
    transform: translateY(-50%);

    /* 此处最好不要有margin-top: -100px; 这样的写法,不具有普遍适用性,假如是一个动态网页,需要从服务器获取资源,图片的大小可能随时会变,这种方法会直接失效,而且通过上外边距来调整位置就是在凑答案,强烈不推荐这种写法。向上移动自身的一半即可*/
}

 

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/qq_44647809/article/details/115564185

智能推荐

前端webpack构建react系列二:开发阶段,热模块替换(HMR,热更新)_kiramario的博客-程序员信息网

热更新在前端开发中,我们做的最频繁的是刷新浏览器,清楚缓存。如果以webpack打包方式开发,修改代码的时候我们还需要重新构建,再重新刷新浏览器,效率肯定很低。采用热更新技术可以提高效率,通俗就是说,我一修改js文件且保存,webpack自动构建,浏览器自动刷新。 感觉很黑科技,其实就是用webpack把js打包到内存里面,为了达到此效果,我们需要配置一个本地服务器,主页面请求此服...

30m服务器可以用多少人在线,30m网速(30m宽带够几个人用)_古德猫的靴子的博客-程序员信息网

下载速度每秒30m,这个是多少m宽带,电信的每秒30m下载速度是240m的宽带。下载速度30MByte*8=240Mbps宽带。宽带网速中的2、4、8兆通常指2、4、8Mbps。Mbps=Mbit/s即兆比特每秒(Million bits per second.快吗?在中国能排第几? 当然是家庭啊网站测速没用的,最高使用迅雷下载qq软件取最高下载速度, 如果我做峰值测试去到1gb都可以。 电信是绝...

js时间段选择,js时间戳、加减天、时分秒、加减_女施主,请自重的博客-程序员信息网_js选择时分秒

如上图需求:当我选"一周内"时我要截取当前时间的七天之内的时间(今天天减去七天就是开始时间,结束时间就是今天)“一月内”减30天以此类推,如何实现呢?看代码://时间对象var DateStr = new Date();//==== 一天算法:/***这里算法解析:1秒=1000毫秒1分钟=60秒1小时=60分钟1天=24小时***/var TimeDays = (1000 * 60) * 60 * 24;//当前时间戳var nowTime = DateStr.get...

基于matlab的负反馈仿真,MATLAB的单闭环转速负反馈直流调速系统仿真_麓鸯的博客-程序员信息网

基于MATLAB的单闭环速度负反馈直流速度控制系统仿真一、系统原理为了提高直流调速系统的动态和静态性能指标,一般采用闭环控制系统(包括单闭环系统和多闭环系统)。如果速度调节指标不高,则使用单闭环系统;如果速度调节指标高,则使用多闭环系统。根据反馈,可以分类为转速反馈、电流反馈、电压反馈等。在单闭环系统中,更多地使用转速单闭环。在该装置中,旋转速度单闭环实验将反映速度变化的电压信号作为反馈信号,在“...

【AUTOSAR-COM】-5.1-“Deadline Monitoring超时监控”-1-理论部分_汽车电子助手的博客-程序员信息网

在Autosar COM模块中,提供两种Deadline Monitoring超时监控机制:1.基于I-PDU2.基于信号Signal/信号组Signal Group的Update Bit更新位。下面讲讲二者的理论部分。关键字:DM:Deadline Monitoring超时监控UB:Update Bit更新位I-PDUSignalSignal Group信号组Com_ReceptionDMControlCom_CbkTxTOutComFirstTimeoutComTimeou

随便推点

JDK安装步骤_斩·侯的博客-程序员信息网

查看当前Linux系统是否已经安装java输入 rpm -qa | grep java要是有的话把他卸载掉卸载两个openJDK输入rpm -e --nodeps 要卸载的软件1.把jdk文件的压缩包拖入虚拟机2.找到刚刚拖的那个文件3创建jdk文件夹4.解压jdk的文件,并存放在刚刚创建的jdk的文件夹下5.查看文件所在位置,配置环境变量vi编辑的时候吧一下东西编辑进去#set java environmentJAVA_HOME=/usr/local/jdk/jdk

ubuntu 安装完后对于开发需要做的事情_weixin_30735391的博客-程序员信息网

是从https://www.osboxes.org/ubuntu/ 下载的vdi文件,估计vmware对应的应该也有。1. 安装 openssh-serverapt-get install openssh-server可以对 openssh server进行配置$ sudo vi /etc/ssh/sshd_config找到PermitRootLogin no一行,改为PermitRo...

Python ln_Python 可视化——绘制动图_weixin_39788986的博客-程序员信息网

在进行动力学模拟的时候遇到了状态过程可视化问题,因此mark一下python动图的绘制,希望能有所帮助。这里主要介绍 python中 matplotlib 的 animation 模块,可以快速绘制Mp4, gif动画class matplotlib.animation.FuncAnimation(fig, func, frames=None, init_func=None, fargs=None...

解决法文乱码_weixin_34100227的博客-程序员信息网

法文文本乱码显示解决方案  (一)乱码显示原因:文本不是以Unicode或者UTF-8编码存档的,而是iso-89001的  (二)解决方案:  ⑴将含法文文本文件的扩展名改为.txt  ⑵鼠标右键点击该.txt文件,选用IE打开之,此时显示仍为乱码  ⑶调整IE的编码为西欧,乱码消除  ⑷复制调整后的文本到记事本  ⑸以UTF-8编码格式保存  本方案也应该适...

[基础学习]原生JS+原型+ES6-高阶函数_刘刘哒的博客-程序员信息网_js八拔把爸白摆败

面向对象编程面向对象类和对象创建类类的创建 //类 class Star { constructor(name) { this.name = name } sing(song) { console.log(song + this.name); } } const ldh = new Star('刘德华') ldh.sing('我会唱歌')

高通骁龙865之camera性能深度分析(一)_icamera0的博客-程序员信息网

[题外话]近期申请了一个微信公众号:平凡程式人生。有兴趣的朋友可以关注,那里将会涉及更多更新图像处理方面的文章。美国高通公司(Qualcomm)创立于1985年,总部设于美国加利福尼亚州圣迭戈市,33,000多名员工遍布全球。高通公司是全球3G、4G与5G技术研发的领先企业,目前已经向全球多家制造商提供技术使用授权,涉及了世界上所有电信设备和消费电子设备的品牌。高通旗下骁龙处理器(Qu...

推荐文章

热门文章

相关标签