实现div里的img图片水平垂直居中

实现div里的img图片水平垂直居中body结构<body><div><imgsrc="1.jpg"alt="haha"></div></body>方法一:将display设置成table-cell,然后水平居中设置text-align为center,垂直居中设置vertical-align为middle。<styletype="text/css">*{

大家好,又见面了,我是你们的朋友全栈君。

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>

结果如下图所示:
这里写图片描述


很久以前的文章了,看到浏览量这么高,我再补充几种实现方法

方法三:可以用在不清楚图片图片或元素的真实宽高情况下
还是通过position定位来实现。将div设置成相对定位relative,将img设置成绝对定位absolute,left:50%,top:50%,此时图片的左上角位于div的中心,要是图片的中心位于div的中心,就需要将图片向上移动图片高度的一半,并向左移动图片宽度的一半,如果不知道元素的宽高,可以用transform: translate(-50%,-50%);

<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%;
        transform: translate(-50%,-50%);
    }
</style>

方法四:

<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: 0;
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto;
    }
</style>

方法五:弹性布局flex

<style type="text/css">
    *{margin: 0;padding:0;}
    div{
        width:150px;
        height: 100px;
        border:1px solid #000;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    img {
        width: 50px;
        height: 50px;
    }
</style>

效果都一样,希望能帮到大家!

读后有收获并有兴趣的可以微信打赏哈哈:
在这里插入图片描述

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/137482.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • 消息是什么_消息和信息有什么区别

    消息是什么_消息和信息有什么区别Windows基于消息的模式:一旦程序启动,它只是简单地等待发送给它的消息,然后作出相应的响应。由Windows本身去检测是否有一个键被按下或是否有鼠标移动。当这类事件发生时,Windows

  • S3C2440移植uboot之编译烧写uboot

    S3C2440移植uboot之编译烧写uboot移植环境主机:VMWare–ubuntu16.04开发板:S3C24402440编译器:arm-linux-gcc-4.3.2.tgzu-boot:u-boot-2012.04.01.tar.bz2获取uboot进入https://www.denx.de/wiki/U-Boot下载uboot一直往下拉选择如下将下载好的压缩包解压到任意文件夹,并创建sourceinsig…

  • 使用gitolite搭建git服务器

    使用gitolite搭建git服务器使用gitolite搭建git服务器

  • ARM 之七 主流编译器(armcc、iar、gcc for arm、LLVM(clang))详细介绍[通俗易懂]

    ARM 之七 主流编译器(armcc、iar、gcc for arm、LLVM(clang))详细介绍[通俗易懂]比较目前,针对于ARM平台的主流编译器主要有以下三者:比较ARMCCIARGCCforARM命令行工具IDE中,独立提供仅随其IDE发布,不独立提供独立提供开发商ARMIARGNU(目前由ARM维护)支持的平台Windows、LinuxWindowsWindows、Linux、Mac配套IDEKeilMDK、Develo…

  • App测试面试题_手机软件测试

    App测试面试题_手机软件测试1.Web端测试和App端测试有何不同(常见)系统结构方面Web项目,b/s架构,基于浏览器的;Web测试只要更新了服务器端,客户端就会同步会更新;App项目,c/s结构的,必须要有客户端;App修改了服务端,则客户端用户所有核心版本都需要进行回归测试一遍;兼容方面Web项目:a.浏览器(火狐、谷歌、IE等)b.操作系统(Windows7、Windows10、Linux等)App项目:a.设备系统:iOS(ipad、iphone)、Android(三星、华为、联想等)、

  • linux rsyslogd cpu占用率高问题「建议收藏」

    linux rsyslogd cpu占用率高问题「建议收藏」最近有几次,linuxcentos7服务停了后,重启,再起一些应用后,查看top后,rsyslogdcpu占用率高问题,先说我这块怀疑导致的原因吧。原因很有可能是当前机器的系统盘挂载出现问题,或者系统盘有磁道坏了,导致,在启动某个软件时,一直在记录日志。现象top命令看下一:解决发现rsyslog可以理解为增强版的syslog,可以支持输出日志到各种数据库,使用RELP+TCP实现数据的传输,对目前的服务器服务而言,可以关闭该进程。#第一步:重启rsyslog服务,

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号