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 ...
随机推荐
- HTML5音频
<audio>用来播放声音文件. 案例1: <!DOCTYPE html><html><head lang="en"> <me ...
- 鼠标悬停移除更换class
$("#xinl").mouseover(function() //鼠标悬停执行函数 { $(".xl").removeClass().addClass(&q ...
- Django 反向生成 从数据库生成Model
Django 反向生成 从数据库生成Model 使用Django生成Model python manage.py inspectdb或python manage.py inspectdb > m ...
- 将图片以Blob格式存入数据库,再通过Servlet显示到界面
1:为了方便测试,直接将1.png图片存入到数据库中. public static void storePicBlog() throws FileNotFoundException, SQLExcep ...
- Quartz.net Cron表达式
由7段构成:秒 分 时 日 月 星期 年(可选)"-" :表示范围 MON-WED表示星期一到星期三"," :表示列举 MON,WEB表示星期一和星期三&qu ...
- [Android]通过setImageURI设置网络上面的图片
设置imageView显示网络上的图片 picUrl = new URL(getIntent().getExtras().getString("map_url")); Bitmap ...
- 【Android】使用BaseAdapter实现复杂的ListView
步骤 使用BaseAdapter实现复杂的ListView的步骤: 1. 数据你要准备好 List getData(). 2. 继承ListActivity专有屏,不再需要setContentView ...
- Linux下串口编程入门
简介: Linux操作系统从一开始就对串行口提供了很好的支持,本文就Linux下的串行口通讯编程进行简单的介绍. 串口简介 串行口是计算机一种常用的接口,具有连接线少,通讯简单,得到广泛的使用.常用 ...
- 页和区 sql server
原文地址:http://msdn.microsoft.com/zh-cn/library/ms190969.aspx SQL Server 中数据存储的基本单位是页.为数据库中的数据文件(.mdf 或 ...
- softlayer