img标签在div中水平垂直居中--两种实现方式
第一种方式: text-align:center; vertical-align:middle;
div{
text-align: center;
vertical-align:middle;width: 400px;
height: 400px;
border: 1px solid #000;
}
img{vertical-align: middle}
span{height: 100%;vertical-align: middle;display: inline-block} <div style="">
<span></span>
<img src="ad-pic.png" alt="" style="border: 1px solid #000;">
</div>
第二种方式 通过设置img为绝对定位,处于垂直和水平50%,然后平移自身宽高的50%
div{
position: relative;
width: 400px;
height: 400px;
border: 1px solid #000;
}
img{
position: absolute;
top:50%;
left:50%;
transform: translate(-50%,-50%);
}
img标签在div中水平垂直居中--两种实现方式的更多相关文章
- p标签在div中水平垂直居中且文本左对齐
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- css 水平垂直居中两种常用方式
- JAVA高级架构师基础功:Spring中AOP的两种代理方式:动态代理和CGLIB详解
在spring框架中使用了两种代理方式: 1.JDK自带的动态代理. 2.Spring框架自己提供的CGLIB的方式. 这两种也是Spring框架核心AOP的基础. 在详细讲解上述提到的动态代理和CG ...
- Springboot中IDE支持两种打包方式,即jar包和war包
Springboot中IDE支持两种打包方式,即jar包和war包 打包之前修改pom.xml中的packaging节点,改为jar或者war 在项目的根目录执行maven 命令clean pa ...
- Android中BroadcastReceiver的两种注册方式(静态和动态)详解
今天我们一起来探讨下安卓中BroadcastReceiver组件以及详细分析下它的两种注册方式. BroadcastReceiver也就是"广播接收者"的意思,顾名思义,它就是用来 ...
- Java中String对象两种赋值方式的区别
本文修改于:https://www.zhihu.com/question/29884421/answer/113785601 前言:在java中,String有两种赋值方式,第一种是通过“字面量”赋值 ...
- 细说java中Map的两种迭代方式
曾经对java中迭代方式总是迷迷糊糊的,今天总算弄懂了.特意的总结了一下.基本是算是理解透彻了. 1.再说Map之前先说下Iterator: Iterator主要用于遍历(即迭代訪问)Collecti ...
- Android中Fragment的两种创建方式
fragment是Activity中用户界面的一个行为或者是一部分.你可以在一个单独的Activity上把多个Fragment组合成为一个多区域的UI,并且可以在多个Activity中再使用.你可以认 ...
- Java中容器的两种初始化方式比较
List,Set,Map的两种初始化赋值方式 List List<Integer> list2 = new ArrayList<Integer>(); for (int i= ...
随机推荐
- IBM新合作伙伴计划助力企业转型升级
IBM作为老牌企业,一直在引领者技术方面的变革.当IBM再一次从自我革新开始,期望能够更快的将认知计算和云推广给自己的合作伙伴和用户们,以帮助他们在新的转型期内,能够快人一步. ...
- js动态参数作为Object的属性取值
js动态参数作为Object的属性取值var myObj = {"a":1,"b":2};var a = 'a';myObj[a] 就可以获取到 属性a的值了
- Vue和Bootstrap的整合之路
我是一个刚刚接触前端开发的新手,所以有必要记录如何将Bootstrap和Vue进行整合. 如果你是老手,请直接绕道而过.作为一个新手,里面的步骤,过程或者专业术语未必正确,如果你发现哪里错误了,请发邮 ...
- AS中layout_gravity与gravity的区别
gravity 这个英文单词是重心的意思,在这里就表示停靠位置的意思. android:layout_gravity 和 android:gravity 的区别 从名字上可以看到,android:gr ...
- 如何简单的实现新手引导之UGUI篇
一个完整的游戏项目肯定是要做新手引导的,而引导做的好坏可能会影响玩家的留存.那么怎么简单的实现个简有效的引导呢!先不说废话,先看看效果,这是一个基于UGUI做的一个简单的引导! 怎么样,看着是那么回事 ...
- 解决SQL Server 阻止了对组件 'Ad Hoc Distributed Queries' 的 STATEMENT 'OpenRowset/OpenDatasource' 的访问
根据需要进行asp.net的数据导入导出,结果报以下错: mark-1: [报错]SQL Server 阻止了对组件 'Ad Hoc Distributed Queries' 的 STATEMENT ...
- Unity 游戏框架搭建 (五) 简易消息机制
什么是消息机制? 23333333,让我先笑一会. 为什么用消息机制? 三个字,解!!!!耦!!!!合!!!!. 我的框架中的消息机制用例: 1.接收者 ``` using UnityEngine ...
- CentOS下源码安装vsftpd-3.0.0,并设置指定用户访问指定目录(附带完整配置文件)
1.卸载系统已经存在的ftp服务器 因为是源码安装,所以不能通过rpm -qa的方式查看是否已经安装ftp服务器,可以通过find / | grep vsftp*方式查看系统中存在哪些与vsftpd相 ...
- CSS三种引入方式:内联、页级、外联
1.内联CSS 内联CSS也可称为行内CSS或者行级CSS,它直接在标签内部引入,显著的优点是十分的便捷.高效:但是同时也造成了不能够重用样式的缺点,如果代码行数到达一定长度不建议采用.通常内联CSS ...
- 逆波兰表达式的C实现
复习下数据结构,用栈简单实现逆波兰表达式,参考文档: http://www.nowamagic.net/librarys/veda/detail/2307 http://www.nowamagic.n ...