CSS中图片水平垂直居中方法小结
- 写页面时难免会遇到水平垂直居中的问题,总结一下最近使用的方法。
一、使用垂直居中和水平居中
<div id="div1">
<img src="img/bg1.png" alt="">
</div>
对应的CSS的样式为:
#div1 {
width: 500px;
height: 200px;
background-color: #0c0c0c;
display: table-cell;
vertical-align: middle;
text-align: center;
}
二、使用相对定位和绝对定位
主要原理是父div相对定位,子div采用绝对定位
<div id="div4">
<img src="img/bg1.png" alt="">
</div>
对应的CSS的样式为
#div4 {
width: 500px;
height: 300px;
position: relative;
background-color: #eee;
}
#div4 img {
position: absolute;
left: 38%;
top: 35%;
}
主要是要注意的问题是要自己定位距离左、上的距离;
三、使用浮动定位
主要原理为设置父divdisplay: flex;
,然后子div自由浮动
<div id="div5">
<img src="img/bg1.png" alt="">
</div>
对应的样式:
#div5 {
width: 400px;
height: 300px;
display: flex;
background-color: #0c0c0c;
}
#div5 img {
width: 116px;
height: 101px;
max-width: 100%;
max-height: 100%;
margin: auto;
}
CSS中图片水平垂直居中方法小结的更多相关文章
- css中元素水平垂直居中4种方法介绍
table-cell轻松设置文本图片水平垂直居中 让一个元素垂直居中的思路:把这个元素的容器设置为table-cell,也就是具有表格单元格的特性,再使用vertical-align(这个属性对blo ...
- CSS制作图片水平垂直居中
所谓的图片水平垂直居中就是把图片放在一个容器元素中(容器大于图片尺寸或是指定了大小的容器),并且图片位居此容器正中间(中间是指元素容器的正中间),而图片不是以背景图片(background-image ...
- css实现图片水平垂直居中
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- CSS制作图片水平垂直居中 亲测推荐
空白标签实现图片的垂直居中 这种方法很有意思,也很有独特之处,我的思路也是来自于张鑫旭-鑫空间-鑫生活写的<大小不固定的图片.多行文字的水平垂直居中>一文中的使用空白图片实现垂直对齐.他主 ...
- 关于div中图片水平垂直居中的问题
最近在做一个项目,里面涉及到不固定尺寸要在div里面水平垂直居中显示 我没有用table布局,而是用了div+css,找了很久,终于在网上找到解决方案,特此记录备用 关键核心代码如下: <div ...
- css 使图片水平垂直居中
1.利用display:table-cell,具体代码如下: html代码如下: <div class="img_wrap"> <img src="wg ...
- 纯CSS实现图片水平垂直居中于DIV(图片未知宽高)
<div class="demo"><a href="#"><img src="http://nec.netease.c ...
- CSS布局中的水平垂直居中
CSS布局中的水平垂直居中 各位好,先说两句题外话.今天是我开通博客园的博客第一天,虽然我申请博客园的账号已经有一年半了,但是由于各种原因迟迟没有开通自己的博客.今天非常有幸开通博客,在此也写一篇关于 ...
- css两种常用的不定宽高的水平垂直居中方法,记住它,不再为样式发愁
css 几种常用的简单容易记住的水平垂直居中方法 前言 正文 第一种方法 第二种方法 结束语 前言 我们在设计网页时,会大量的运用到水平垂直居中,如果知道元素的宽高,那水平垂直居中是很简单的,无非是用 ...
随机推荐
- mybatis与spring的整合(使用sqlSession进行crud)
上次介绍了用接口的方法极大的节省了dao层,只需通过 配置文件和接口就可以实现,这次介绍的是通过splsession来实现dao,这种方法比较灵活: 先不说,上配置文件: 1.web.xml < ...
- 聊聊JavaScript-闭包
今天聊聊闭包,网上五花八门的定义和解释很多很多,是不是搞得你很懵逼:每次看闭包,都不同,本来自己懂,看完别人的之后就开始怀疑自己了.在我看来,闭包简单的说就是函数里面套函数,再往大了说就是我函数外面想 ...
- uboot 添加hello命令
平台:MPC8315(POWERPC) 1.在/common/ 目录下创建自己的文件,最好前缀为cmd_. cmd_hello.c ********************************** ...
- Emacs编辑器配置
以前总是用的vim编辑器,今天突然想换emacs 用下.折腾了很久终于搞定.使用的是windows测试环境 emacs下载地址http://ftp.gnu.org/gnu/emacs/windows/ ...
- Linux显示使用者将不能利用交谈式指令来对行程
Linux显示使用者将不能利用交谈式指令来对行程 youhaidong@youhaidong-ThinkPad-Edge-E545:~$ top -s top - 19:23:34 up 52 min ...
- python空字典列表两种生成方式对赋值带来的不同影响
最近在实现朴素贝叶斯算法碰到一个很有趣的现象(基于Python3.6.3) 我生成一个由10个空字典构成的列表: 第一种生成方式(可能大多数人都会用这种方法,形式简单) >>a = [{} ...
- Visio如何调整锁定图像大小
在Visio中,比如模板中的UML类图,是不可调整大小的,这可能给我们设计图片带来了一些不便之处,如下图: 可以看到其边框是显示锁定状态无法修改的,当我们在左下角修改器长宽时,也会出现不可修改的情况. ...
- Spring Boot 文件上传
其实网上已经有很多这样的文章了.为什么我还要记录一下呢?原因是在工作中对接外系统时,碰到了他们调取我们文件上传接口确存在着http请求头部规范的情况,从而导致用传统方法获取不到参数.今天就来整理下Sp ...
- debug和release下PostThreadMessage的异同
MFC中创建线程分为工作线程和UI线程.其中UI线程可以通过继承CWinThread进行创建. 创建函数如下: CWinThread *m_pRecogThread;//语音识别线程 m_pRecog ...
- 最新的 iOS 申请证书与发布流程
申请流程. 1. 申请钥匙串文件 进入 (Launchpad),找到 (我的是在其他里面找到的),运行后再左上角 存储在桌面就好了,然后就完成退出钥匙串工具就可以了. 2.申请开发证书,发布证书 ...