纯css 图片自适应居中
html 结构
<div class="container">
<div class="content"></div>
</div>
css
.container{
width: 100%;
height: 100%;
text-align:center;
position: fixed;
}
.container:after {
display: inline-block;
content: '';
width:;
height: 100%;
vertical-align: middle;
}
.content{
width: 100px;
height: 100px;
display: inline-block;
vertical-align: middle;
background: blue;
}
纯css 图片自适应居中的更多相关文章
- 演示:纯CSS实现自适应布局表格
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- div等比例缩放-------纯CSS实现自适应浏览器宽度的正方形
摘自:https://blog.csdn.net/u010513603/article/details/78200207 1.方案一:CSS3 vw 单位 CSS3 中新增了一组相对于可视区域百分比的 ...
- 纯CSS图片缩放后显示详细信息
哎~!突然好久没更新博客了,最近总在下雨,晚上也经常没有时间来管理博客(目前在敲自己的一个平台,晢时还在写逻辑层的代码),好吧!废话不多说了,言归正传. 现在很多图片缩放的特效大多数都是用javasc ...
- CSS 图片自适应容器
https://www.jb51.net/css/660677.html 经常有这样一个场景,需要让图片自适应容器的大小. 1.img标签的方式 我们马上就能想到,把width.height 设置为1 ...
- css 图片文字居中
1.单行文字居中 2.多行文字居中 3.利用background-position:center;的图片居中 4.利用display:table-cell;属性的图片居中 <!DOCTYPE h ...
- 前端纯css 图片的模糊处理
最近做的一个项目需要用到背景图的模糊处理,在网上查资料,发现用css的 filter 属性就可以解决,但是因为模糊度比较高,四周会有很长的模糊边,百度上也没找到解决的方法,,可喜的是最后我在分析一个d ...
- Css 图片自适应
设置 CSS .container{ overflow:auto; } img{ width:100%; height:auto; overflow:hidden; } 设置 template < ...
- html5+css 图片自适应
<div style="position:absolute; width:100%; height:100%; z-index:-1; left:0; top:0;"> ...
- 原创jQuery插件之图片自适应
效果图例如以下: 功能:使图片自适应居中位于容器内 限制:容器须要给定大小 用法: 1.引入jQuery.然后引入fitimg插件 2.给须要图片自适应的容器固定宽高 3.header .accoun ...
随机推荐
- MySQL 压缩解决方案
From:https://www.qcloud.com/community/article/876100 导语 描述 MySQL 压缩的使用场景和解决方案,包括压缩传输协议.压缩列解决方案和压缩表解决 ...
- <LeetCode OJ> 337. House Robber III
Total Accepted: 1341 Total Submissions: 3744 Difficulty: Medium The thief has found himself a new pl ...
- 简单的ftp服务器
import os from pyftpdlib.authorizers import DummyAuthorizer from pyftpdlib.handlers import FTPHandle ...
- java 定义一个同步map内存去重法
实例:
- HBase写请求分析
HBase作为分布式NoSQL数据库系统,不单支持宽列表.而且对于随机读写来说也具有较高的性能.在高性能的随机读写事务的同一时候.HBase也能保持事务的一致性. 眼下HBase仅仅支持行级别的事务一 ...
- IP和归属地
ip: http://www.ip.cn/index.php?ip=10.132.98.143 归属地: http://www.ip138.com:8080/search.asp?action=mob ...
- Python之Pandas库常用函数大全(含注释)
前言:本博文摘抄自中国慕课大学上的课程<Python数据分析与展示>,推荐刚入门的同学去学习,这是非常好的入门视频. 继续一个新的库,Pandas库.Pandas库围绕Series类型和D ...
- jquery live hover
$("table tr").live({ mouseenter: function() { //todo }, mouseleave: function() { //todo } ...
- NoSQL的四大类型
1 键值数据库 相关产品:Redis.Riak.SimpleDB.Chordless.Scalaris.Memcached 应用:内容缓存 优点:扩展性好.灵活性好.大量写操作时性能高 缺点:无法存储 ...
- Sping框架概述
一.什么是spring框架 spring是J2EE应用程序框架,是轻量级的IoC和AOP的容器框架,主要是针对javaBean的生命周期进行管理的轻量级容器,可以单独使用,也可以和Struts框架,i ...