使用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.文中详细的介绍了 ...
随机推荐
- docker导入本地镜像
-rw-r--r-- 1 root root 98954220 Mar 17 17:02 centos-6-x86.tar.gz 利用下载的包 创建镜像: cat centos-6-x86.tar.g ...
- 通过属性集名称获取属性集id
Mage::getModel('eav/entity_attribute_set')->load('属性集名称', 'attribute_set_name')->getAttributeS ...
- UNIX网络编程---传输层:TCP、UDP、SCTP(二)
UNIX网络编程----传输层:TCP.UDP.SCTP 一.概述 本章的焦点是传输层:包括TCP.UDP.和SCTP(流控制传输协议).SCTP是一个较新的协议,最初设计用于跨因特网传输电话信令. ...
- auto_ptr 要点解析
今天看了auto_ptr类的用法,又仔细看了看C++标准库中的符合标准的auto_ptr类别的实作,觉得自己基本上理解了auto_ptr的原理,下面就我的心得写几句,有不正确的地方,希望多多指教. 1 ...
- ADT Example
Example Data Types: Integer, and Character Example (Integer Data Type) The integer data type can con ...
- 改动分区后,导致linux上不了
/*************************** *Author : 林旭东 *problem:基于分区改动出现的问题(1) *calender: 15/07/10 ******** ...
- Temporary Post Used For Theme Detection (19f70e1d-5d8d-4c19-aef1-5b5a71ae0c47 - 3bfe001a-32de-4114-a6b4-4005b770f6d7)
This is a temporary post that was not deleted. Please delete this manually. (90462755-633b-4a0e-abb7 ...
- Serializable接口的背后
序列化是什么? 序列化就是将一个对象的状态(各个属性量)保存起来,然后在适当的时候再获得.序列化分为两大部分:序列化和反序列化. 序列化是这个过程的第一部分,将数据分解成字节流,以便存储在文件中或在网 ...
- AssetBundle的使用
using UnityEngine; using System.Collections; using UnityEditor; using System.IO; public class Editor ...
- 浅谈C中的指针和数组(五)
前面写了一些C指针和数组的一些知识,但是还有一些很重要的知识没有交代,这里做一个补充. 首先看一下,普通变量(指针也是变量)和数组名查看地址的方式是不同的. 查看数组变量的地址,不需要使用 & ...