css让图片居中显示在手机屏幕上
直接上代码了
<div class="showpic">
<span></span>
<img src="" alt="">
</div>
样式
.showpic {
font-size: 0;
position: fixed;
top: 0;
width: 100%;
height: 100%;
left: 0;
background: #4d4d4d;
z-index: 999;
text-align: center;
display: none;
}
.showpic span {
height: 100%;
display: inline-block;
vertical-align: middle;
}
.showpic img {
vertical-align: middle;
max-height: 100%;
z-index: 999;
max-width: 100%;
display: inline-block;
}
css让图片居中显示在手机屏幕上的更多相关文章
- css设置图片居中、居左、居右
CreateTime--2017年12月8日14:25:09 Author:Marydon css设置图片居中.居左.居右 图片一般默认是居左显示的,如何更改它的水平位置呢? <div st ...
- css图片居中,通过纯css实现图片居中的多种实现方法
在网页布局中,图文排版是我们常用的,那么经常会遇到如何让图片居中显示呢,这篇文章将总结常用css实现图片居中的方法总结: html结构: <div class="demo" ...
- Droid@screen:在PC屏幕上显示Android手机屏幕
这里介绍一款工具——Droid@screen,用来获取手机屏幕,显示在PC屏幕上.它集截图.录像等多种功能于一体. 安装 1. 下载地址:http://droid-at-screen.org/d ...
- vue打包后js和css、图片不显示,引用的字体找不到问题
vue打包后js和css.图片不显示,引用的字体找不到问题:图片一般都是背景图片. 一.vue打包出现js和css不显示问题: 1.不使用mode:'history' 2.使用mode:'histor ...
- css 字体上下居中显示 解决安卓手机line-height的偏差
1.字体左右居中显示 text-align: center <div class="font"> 上下居中 </div> .font{ width: ...
- CSS基础之居中显示
这些天忙完了一些项目后,终于有时间来总结一下了.自己就把做项目过程中的体会和理解到的一些东西和大家分享一下.有错请指正!! 在css中,元素居中显示,是基础也是一个小难点.我们经常不知为何总是不能把元 ...
- extjs中grid中行内文本或图片居中显示
我是看了网上写的方法调试自己的代码来实现的,实现的方式是当加载store数据时改变grid的行样式,源码如下: html代码: <div id="weatherP_grid-body& ...
- CSS设置图片居中的方法
如果是应用了表格,那么设置单元格为align="center"就可以使其中的一切内容居中.如果没有应用表格要想设置图片居中就有点困难了.困难来自不按"常规出牌" ...
- HTML+Css让网页自动适应电脑手机屏幕
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scal ...
随机推荐
- cubieboardtruck安装
1.命令关闭所有led灯 ls /sys/class/leds/*/brightness | xargs -i -n1 echo "echo 0 > {}" | sh 如果需 ...
- 字符串:各种奇葩的内置方法 - 零基础入门学习Python014
字符串:各种奇葩的内置方法 让编程改变世界 Change the world by program 字符串:各种奇葩的内置方法 或许现在又回过头来谈字符串,有些朋友可能会觉得没必要,也有些朋友会觉得不 ...
- data mining,machine learning,AI,data science,data science,business analytics
数据挖掘(data mining),机器学习(machine learning),和人工智能(AI)的区别是什么? 数据科学(data science)和商业分析(business analytics ...
- Core Data (二)备
序 上次只是说了三个Core Data栈基本类.这次准备介绍一下常用的类. NSManagedObject Core Data是一次底层数据封装成面向对象的技术.最直接的表现就是在SQLite里面的一 ...
- SGU 294 He's Circles
题意:一个项链有n个珠子,每个珠子为黑色或白色.问有多少种不同的项链? 注意,n的数量十分大,因此,我们枚举i(1<=i<=n),令L=n/i,求出L的欧拉函数,则这些数和L互质,因此gc ...
- Win8.1 MSDN各版本下载(64位/32位,简体中文,繁体中文,英文),X86&X64,EN,CHS,CHT
英文64位ed2k://|file|en_windows_8_1_x64_dvd_2707217.iso|3899295744|8E604054013D21209B851E41DC19F6F5|/ 英 ...
- Android高德地图自定义Markers的例子
下文为各位重点介绍关于Android高德地图自定义Markers的例子,希望这篇文章能够让各位理解到Android高德地图自定义Markers的方法. 之前的博客里说了地图的嵌入和定位,今天就说说在地 ...
- 提高效率的便签By番茄时间管理 win7标签,小功能,大作用
今日待办 把一些重要的事情,列入其中. 着重处理. 活动清单 罗列一些最近需要做的事情,不一定按照紧急重要的程度. 把活动清单中的事情,按照实际情况,安排到今日待办当中. 还有一个我喜欢的'头脑风暴' ...
- 通过java类文件识别JDK编译版本
类文件中第5,6,7,8四个字节是jDK版本号信息,其中5,6为小版本号:7,8为大版本号. 大版本号对应JDK版本如下: JDK版本号 7,8字节 JDK8 52(0x34) JDK7 51(0x3 ...
- pyqt listview基础学习01
from decimal import * from PyQt4.QtGui import * from PyQt4.Qt import * from PyQt4.QtCore import * im ...