实现div里的img图片水平垂直居中
时间:2019-09-28
本文章向大家介绍实现div里的img图片水平垂直居中,主要包括实现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>
方法三:可以用在不清楚图片图片或元素的真实宽高情况下
还是通过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>
原文地址:https://www.cnblogs.com/seeding/p/11604157.html
- 翻译qmake文档(四) Building Common Project Types
- 翻译qmake文档(三) Creating Project Files
- 翻译qmake文档(二) Getting Started
- QTableView 添加按钮
- QTableView 添加进度条
- c# 调用win32模拟点击的两种方法
- [原创翻译]Protocol Buffer Basics: C#
- 详解 Android Activity 生命周期
- 设计模式:装饰者模式
- 详解 常量指针和指针常量
- python 列表 总结
- 详解c++指针的指针和指针的引用
- QTableView 一列添加两个按钮
- [个人翻译]Redis 集群教程(上)
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- springboot开发之修改员工
- LeetCode | 703.数据流中的第K大元素
- springboot开发之配置自定义的错误界面和错误信息
- springboot开发之删除员工
- LeetCode | 1.两数之和
- springboot开发之配置嵌入式Servlet容器两种方式
- jvaa之初始化块
- java之匿名内部类
- springboot配置之获取配置文件中属性的第二种方法(@Value)不同于@ConfigurationProperties
- mybatis动态sql之内置参数_parameter和_databaseId
- Redis | Redis 字符串相关命令
- java之抽象类
- springboot配置之yaml
- properties和yaml配置文件
- java之模板方法设计模式