如何实现DIV中图片左右居中和垂直居中?(已解决)
实现 如何 解决 图片 div 居中 垂直 左右
2023-09-11 14:15:11 时间
第一种:最简单DIV套图
1、DIV :
上下居中:line-height: 200px;
左右居中:text-align: center;
2、img:vertical-align: middle;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport"
content="width=device-width, initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
<title>flex - 弹性盒</title>
</head>
<style>
.box_1 {
height: 200px;
width: 250px;
background-color: antiquewhite;
border: 8px red solid;
box-sizing: content-box;
margin-left: 20px;
text-align: center; /* 左右居中 */
line-height: 200px; /* 垂直居中 */
}
img {
width: 130px;
height: 130px;
vertical-align: middle; /* 垂直居中 */
}
</style>
<body>
<div class="box_1">
<img src="/images/bank.png" alt="">
</div>
</body>
</html>
第二种:父DIV - 子DIV - 图片(两个DIV模式)
Html代码:
<div class="logo">
<div>
<img src="images/logo_1.png">
</div>
</div>
但是要注意,如果有float:left,将无效。解决办法是:再套一个DIV
<style>
.logo {
height: 60px;
}
.logo div {
width: 80%;
height: 80%;
background-color: rgb(245, 196, 169);
position: relative;
margin: 0 auto;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
.logo img {
width: 100%;
height: 100%;
}
</style>
相关文章
- CSS3怎样实现超出指定文本以省略号显示效果
- 【Css/小程序】如何实现div或view中的文字左右居中和垂直居中?(已解决:多行和单行自适应)
- 【Css】Css实现div卡片【横向滑动】效果(图文+完整源代码)
- LSD快速直线检测的原理概要及OpenCV代码实现(CV类LineSegmentDetector)
- po是什么?自动化测试po分层如何实现?-带po详细源代码
- Mybatis是如何实现分页功能的
- 【HarmonyOS】基于JS UI的Java服务卡片如何实现动态定时刷新
- C++11 lambda表达式是如何实现的?
- 《众妙之门——移动交互体验设计》一第1章 未来的移动技术1.1 人人实现互联
- 实现Android Studio JNI开发C/C++使用__android_log_print输出Log
- android 自定义ViewGroup和对view进行切图动画实现滑动菜单SlidingMenu
- CloudCC 探讨销售人员如何借助CRM实现业绩腾飞
- SwiftUI 高级用法之如何捕获截取事件实现隐藏收起展开PreferenceKey(教程含源码)
- 微信小程序如何实现下拉刷新
- ubuntu18.04环境下如何为 vs code 实现ftp功能
- 利用Hessian如何实现Webservice
- 浅析如何实现一个可取消的异步 HTTP 请求模块
- 浅析前端路由原理和实现方式
- 如何实现ABC三个线程按顺序执行十次
- Andrew Ng-机器学习基础笔记(上)-Python实现代码
- 新型数据中心如何实现节能降耗
- myeclipse 如何快捷查看一个接口的实现类
- 【Java UI】智能手表如何实现负一屏功能
- 【ARK UI】HarmonyOS 如何实现新闻列表
- 【快应用】如何实现快应用页面退出时弹框确认
- 负载均衡—实现配置篇(Nginx)
- 笔记本手机都能用,轻松实现100W快充,AOHi 100W氮化镓PD 充电器体验
- spring boot 2 集成JWT实现api接口认证
- IT新渠道眼中的高价值增长如何实现?
- 树莓派 + OpenALPR 实现车牌识别
- 以监控为核心 实现安防智能化全面兼容
- 【Unity Shader】用Cubemap实现天空盒和环境映射
- vue:实现锚点双向滚动/文章章节联动滚动效果