css图片垂直居中
css图片垂直居中
一.style代码
.case-pic{
height: 125px;
position: relative;
text-align: center
}
.case-pic span{
display: inline-block;
height: 100%;
vertical-align: middle;
}
.case-pic .img{
height: 60px;
vertical-align:middle;
}
二.html代码
<div class="case-pic"><span></span><img src="public/images/case_1.jpg" alt="" /></div>
css图片垂直居中的更多相关文章
- css 图片垂直居中总结
1.利用vertical-align:middle: 父级元素设置成display:table-cell; 同级元素设置一个span标签 设置display:inline-block:图片样式设置ve ...
- CSS图片垂直居中方法
让div里面的多行文本垂直居中的方法: div{height:100px;width:100px;border:solid 1px red;text-align:center; display:tab ...
- CSS图片垂直居中方法整理集合
原帖链接:http://bbs.blueidea.com/thread-2666987-1-1.html 1.因为Opera,FF3,IE8均支持display:talbe;这些特性了,因此改进的办法 ...
- css垂直居中怎么设置?文字上下居中和图片垂直居中
css 居中分css垂直居中和css水平居中,水平居中平时比较常用,这里我们主要讲css上下居中的问题.垂直居中又分为css文字上下居中和css图片垂直居中,下面我们就分别来介绍一下. css文字上下 ...
- css图片居中(水平居中和垂直居中)
css图片居中(水平居中和垂直居中) css图片居中分css图片水平居中和垂直居中两种情况,有时候还需要图片同时水平垂直居中,下面分几种居中情况分别介绍. css图片水平居中 利用margin: 0 ...
- CSS让图片垂直居中的几种技巧
在网页设计过程中,有时候会希望图片垂直居中的情况.而且,需要垂直居中的图片的高度也不确定,这就会给页面的布局带来一定的挑战.下面总结了一下,曾经使用过的几种方法来使图片垂直居中,除了第一种方法只限于标 ...
- 几种垂直居中的方式及CSS图片替换技术
由于块级元素的高度是可以设置的,所以对于块级元素的垂直居中比较简单. 方法一: 在不定高的情况下,把元素的上下内边距设为同一个值即可实现,即padding :10px 0; 以上方法针对块级元素和 ...
- CSS中如何实现未知尺寸图片垂直居中
在曾经的 淘宝UED 招聘 中有这样一道题目: “使用纯CSS实现未知尺寸的图片(但高宽都小于200px)在200px的正方形容器中水平和垂直居中.” 当然出题并不是随意,而是有其现实的原因,垂直居中 ...
- CSS设置图片垂直居中的方法
如果是应用了表格,那么设置单元格为align="center"就可以使其中的一切内容居中.如果没有应用表格要想设置图片居中就有点困难了.困难来自不按"常规出牌" ...
随机推荐
- vs2010+ Ankhsvn使用详解
1.为什么要用VisualSVN Server,而不用Subversion? 回答: 因为如果直接使用Subversion,那么在Windows 系统上,要想让它随系统启动,就要封装SVN Serve ...
- VJP1063 迎春舞会之集体舞(DP)
我是被这题彻底折腾惨了 .. DP很简单 不用说了 重点是必须按它那个图说来来划分三角形 而不是随便撇下一部分 随便划下一个三角形就可以 所以 要判断J是第奇数个点才可以 #include <i ...
- hadoop 序列化源码浅析
1.Writable接口 Hadoop 并没有使用 JAVA 的序列化,而是引入了自己实的序列化系统, package org.apache.hadoop.io 这个包中定义了大量的可 ...
- MapReduce架构设计
MapReduce采用Master/Slave的架构,其架构图如下: 它主要有以下4个部分组成: 1)Client 2)JobTracker JobTracke负责资源监控和作业调度.JobTrack ...
- Hibernate: org.hibernate.exception.SQLGrammarException: could not insert: 错误
最近在学习Java Web,今天刚接触Hibernate.学习的书籍是<轻量级Java EE企业应用实战(第3版)>.书中367页5.2.2中给予的Hibernate例子中的代码运行有以下 ...
- PHP静态化之真静态化
参考文献:http://blog.sina.com.cn/s/blog_66aa1142010114lc.html 采用了动态服务器技术生成静态HTML的做法,这样做的好处是:一是能减轻其服务器的负担 ...
- Android Support v4、v7、v13的区别和应用场景
N久未做android了,以前做的时候,2.2才刚出来,现在android都更新到了4.3了,而从前一段时间android各个sdk版本市场占有率 来看,1.6.2.1还是占有一定的市场,故在有些时候 ...
- openlayer调用geoserver发布的地图实现地图的基本功能
转自:http://starting.iteye.com/blog/1039809 主要实现的功能有放大,缩小,获取地图大小,平移,线路测量,面积测量,拉宽功能,显示标注,移除标注,画多边形获取经纬度 ...
- Unity3d 粒子工具注释
今天群里有人问到瀑布粒子如何调整尺寸. 我查到ellipsoid可以调节产生粒子的空间范围,然后还需要调节粒子的长度.他那个瀑布太长了.max energy和min energy这两个参数可以用来控制 ...
- JSP---JSP中4个容器-pageContext使用
这里重点只讲pageContext容器的用法哦. 因为另外的3个容器(request,session,application)在前面的servlet中已经演示过很多遍了 容器 作用域 pageCont ...