纯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 ...
随机推荐
- 搭建spark中需要注意的问题
在搭建spark的过程中遇到了许多的问题,但是引起这些问题的原因都是因为环境变量没有设置好导致的,这里总结的一些优秀的博文,可以供以后参考 http://www.powerxing.com/insta ...
- web前端面试系列 - 算法( 数组去重 )
1. 思路:设置一个临时数组temp,然后遍历要去重的数组arr,如果arr中的元素能够在temp中找到,则跳过此元素,否则将此元素存入temp,最后返回temp. 实现一 function uniq ...
- kubernetes之多容器pod以及通信
系列目录 容器经常是为了解决单一的,窄范围的问题,比如说微服务.然而现实中,一些复杂问题的完成往往需要多个容器.这里我们讨论一下如何把多个容器放在同一个pod里以及容器间的通信 什么是pod pod是 ...
- oracle sql 当初始化数据时避免重复主键
一:当有主键序列自动增长时候(序列为:seq_cct_id) insert into cs_cost_type (CCT_ID, CCT_NAME, CCT_RATE, CCT_RATE_TYPE, ...
- “懒”也要有境地---大部分程序猿都在的地方,再不来就out了。
别人在玩.你也在玩,为什么别人天天进步,职业晋升. 而你则原地踏步. 事实上你和他的距离仅仅有一个微信公众号的距离. 假设你说.我根本没有时间学习,不想看书,我仅仅想睡觉.我想你要接着往下看,由于.谁 ...
- Operation not permitted - /usr/bin/pod
问题描述:执行sudo gem install cocoapods, 提示出错:While executing gem ... (Errno::EPERM) Operation not per ...
- 对于js里的闭包的理解
Ali的回答: 当function里嵌套function时,内部的function可以访问外部function里的变量. function foo(x) { var tmp = 3; ...
- Xcode6 新特性
苹果在WWDC 2014上对新版Xcode(Xcode 6 Beta版)并没有提及过多.但它却是开发人员不能忽视的一部分.Xcode 6 Beta版为设计和创建软件引入了新方法,更加关注功能和一些改善 ...
- Linux环境下安装MySQL(解压方式)
1.将安装包放在服务器上:mysql-5.6.37-linux-glibc2.12-x86_64.tar.gz 2.将安装包解压:tar -zxvf mysql-5.6.37-linux-glibc2 ...
- Linux随笔-鸟哥Linux服务器篇学习总结(全)
作者:Danbo 时间:2015-7-17 在runlevel3启动级别下默认启动网络挂载(autofs)机制,我们可以通过命令将其关闭:chkconfig autofs off 或者 /etc/in ...