使用CSS3伸缩盒实现图片垂直居中
用CSS实现图片垂直居中的方法有很多,针对移动端设备可以用CSS3伸缩盒来实现图片垂直居中。
代码如下:
<div class="box">
<img src="1.png" alt="">
</div>
.box{
display: flex; /*容器为伸缩盒*/
align-items: center; /*纵轴方向上的对齐方式设置为居中*/
}
img{
width: 100%;
}
以上是新版伸缩盒实现的,支持安卓4.4+,如果需要兼容安卓4.4-,需要再另外添加旧伸缩盒,如下:
.box{
display: -webkit-box; /*容器为旧伸缩盒*/
-webkit-box-align: center; /*设置旧伸缩盒对齐方式*/
display: flex; /*容器为伸缩盒*/
align-items: center; /*纵轴方向上的对齐方式设置为居中*/
}
img{
width: 100%;
}
使用CSS3伸缩盒实现图片垂直居中的更多相关文章
- CSS3伸缩盒Flexible Box
这是一种全新的布局,在移动端非常实用,IE对此布局的相关的兼容不是很好,Firefox.Chrome.Safrai等需要加浏览器前缀. 先说说这种布局的特点: 1)移动端由于屏幕宽度都不一样,在布局的 ...
- CSS3 伸缩布局盒模型记
CSS3 伸缩布局盒模型 CSS3引入的布局模式Flexbox布局,主要思想是让容器有能力让其子项目能够改变其宽度,高度,以最佳方式填充可用空间.Flex容器使用Flex项目可以自动放大与收缩,用来填 ...
- CSS3 伸缩布局盒模型
CSS3引入的布局模式Flexbox布局,主要思想是让容器有能力让其子项目能够改变其宽度,高度,以最佳方式填充可用空间.Flex容器使用Flex项目可以自动放大与收缩,用来填补可用的空闲空间.更重要的 ...
- CSS3 Flexbox(伸缩盒/弹性盒模型)可视化指南
在http://css.doyoe.com/(CSS参考手册)中,本文对应其中的伸缩盒 引入 Flexbox布局官方称为CSS Flexible Box Layout Module是一个CSS3新的布 ...
- css3 新旧伸缩盒的异同
由于不需要理会IE浏览器,伸缩盒(flexible box)移动端开发中非常好用! 工作中使用APICLOUD开发手机App,老板要求兼容到安卓2.3(新版的需要安卓4.4以上),所以一直使用的是旧版 ...
- CSS3_伸缩盒模型_弹性布局_等分布局_flex 布局
伸缩盒模型 CSS3 引入的布局模式 Flexbox 布局 主要思想: 让容器有能力让其子项目能够改变其宽度,高度,以最佳方式填充可用空间. 特点: display: flex; 只能控制其子元 ...
- 深入了解 Flexbox 伸缩盒模型
Flexbox(伸缩布局盒) 是 CSS3 中一个新的布局模式,为了现代网络中更为复杂的网页需求而设计.本文将介绍 Flexbox 语法的技术细节.浏览器的支持越来越快,所以当 Flexbox 被广泛 ...
- css3基础教程:CSS3弹性盒模型
今天给大家分享一篇关于CSS3基础教程 文章,主要是讲CSS3弹性盒模型.弹性布局的主要思想是让容器有能力来改变项目的宽度和高度,以填满可用空间(主要是为了容纳所有类型的显示设备和屏幕尺寸)的能力. ...
- CSS3弹性盒模型flexbox完整版教程
http://caibaojian.com/flexbox-guide.html 来自CSS Tricks上的一个教程,原文为:A Complete Guide to Flexbox.文中详细的介绍了 ...
随机推荐
- 微信的分享功能(针对web手机站页面进行的分享功能)
把这段js粘贴进,设置可以分享的页面,当微信打开,即可微信进行分享各个圈 $(function(){ var lujing=$("#logimg").attr("src& ...
- mysql排行榜sql的实现
SELECT num_rows AS num_rows, openid , openid, money FROM lt_cash_user ) t ORDER BY money DESC ) t1 W ...
- ios常用的框架(源自知乎上的回答)
首先,学习这类开源项目的主要目的是为了实现产品汪需求,如果不是这个目的,完全可以看Explore GitHub,当前最火的开源项目都在这里,当然你需要过滤一下语言. 好了,介绍几个希望能帮助到你. 普 ...
- Unity插件之NGUI学习(1)—— 环境搭建
Unity官网http://unity3d.com/unity/download下载最新版本号4.5.4 在圣典论坛上找到破解补丁(Windows)版本号tid=18741&fid=8&quo ...
- mount CIFS return ERR -12 and report Cannot allocate memory
When I mount CIFS on board, it encountered error as below: # mount -t cifs //192.168.1.28/98share /t ...
- oauth2认证
using System; using System.Collections.Generic; using System.Security.Cryptography; using System.Con ...
- java中文乱码解决之道(四)—–java编码转换过程
原文出处:http://cmsblogs.com/?p=1475 前面三篇博客侧重介绍字符.编码问题,通过这三篇博客各位博友对各种字符编码有了一个初步的了解,要了解java的中文问题这是必须要了解的. ...
- 《think in python》学习-4
think in python -4 接口设计: 本章引入了一个实例 来讲解接口方面的知识. 准备工作: 下载swampy模块,从地址下载,并安装,安装信息可以从网页上查看. swampy模块 提供各 ...
- Android Handler Leak
转自:Android中使用Handler引发的内存泄露 在Activity中,经常会用到自定义的Handler来处理主线程收到的Message,但是ADT20以后,直接定义的如下定义的内部会有提示说这 ...
- Object的增。删。查。改。遍历
1.增: 1.向对象添加属性和方法 (私有) ---> obj.属性 =""; 2.向对象原型添加方法 (公共) ---> obj.prototype. ...