html图片垂直居中的方法,CSS图片垂直居中实现方法详解

方法一：利用定位

HTML结构如：

复制代码代码如下:

CSS代码如：

复制代码代码如下:

body {

margin: 0;

padding: 0;

font: 12px/1.5 tahoma,arial;

}

.box {

width: 220px;

height: 220px;

border: 1px solid #F30;

margin: 100px auto 0;

display: table;

}

.pic-wrap {

display: table-cell;

text-align: center;

vertical-align: middle;

}

/*主要针对IE6、7的hack*/

.box {

*position: relative;

}

.pic-wrap {

*width: 100%;

*position: absolute;

*top: 50%;

*left: 0;

/*继承自body的字体会影响到ie6，设置默认的windows系统字体*/

_font-family: sans-serif;

}

.pic-wrap img {

*position: relative;

*top: -50%;

*left: 0;

/*在ie中空文本节点有默认高度*/

vertical-align: middle\9;

/*在ie中，a标签中的img标签默认有蓝色边框*/

border: none\9;

}

方法二：

HTML结构同上；

CSS代码如：

复制代码代码如下:

.box {

width: 220px;

height: 220px;

border: 1px solid #F30;

margin: 100px auto 0;

}

.pic-wrap {

display: table-cell;

vertical-align: middle;

width: 220px;

height: 220px;

text-align: center;

/*ie6、7不支持display:table-cell*/

*display: block;

*font-size: 192px; /*字体大小为height*0.783或者height/1.14,这里约为192px*/

_font-family: sans-serif; /*设置字体，否则在ie6下会有一个像素的偏差*/

}

.pic-wrap img {

border: none;

vertical-align: middle; /*由于ie下空文本节点有默认高度，所以设置*/

}

【注意，当在css中设置了body元素字体的话，那么方法二在ie7下会失效的】

最佳方法：

CSS代码如：

复制代码代码如下:

body {

margin: 0;

padding: 0;

font: 12px/1.5 tahoma,arial;

}

.box {

width: 220px;

height: 220px;

border: 1px solid #F30;

margin: 100px auto 0;

}

.pic-wrap {

display: table-cell;

vertical-align: middle;

width: 220px;

height: 220px;

text-align: center;

/*ie6、7不支持display:table-cell*/

*display: block;

_font-size: 192px;

+line-height: 220px; /*设置ie7中空文本节点行高为220px*/

_font-family: sans-serif;

}

.pic-wrap img {

border: none;

vertical-align: middle\9; /*由于ie中有默认高度的空文本节点*/

}

html图片垂直居中的方法,CSS图片垂直居中实现方法详解相关推荐

css图片跟文字居中,css 图片文字垂直居中
先来看张图片相信很多css新手遇到过这种问题,就是当图片和文本显示在一行的时候,效果很奇葩,文字和图片没法对齐, 这时我们需要做的是: 1,先给块级元素设置 display: inline-bloc ...
nmmqq.php?/lspc.html,html中的图片直接使用base64编码后的字符串代替详解
网页中的图片是使用base64编码后的字符串代替了,这个叫做Data URI scheme,下面有个不错的示例,大家可以参考下最近来了一个网页,里面有图片,但是却没有引用外部的图片资源,很好奇.查看 ...
php增加logo,PHP图片等比缩放和增加Logo水印代码详解和注释
PHP图片等比缩放和增加Logo水印代码详解和注释 //PHP图片的等比缩放和增加Logo水印 /** * 等比缩放函数(以保存的方式实现) * @param string $picName 被缩放的 ...
html css主题,HTML+CSS＝无限可能——案例详解：我的POI主题作品
原标题:HTML+CSS＝无限可能--案例详解:我的POI主题作品在微博发了这个作业,收到很多好评,实在太开心! 斌叔让我来投稿,那今天就以这个网页为案例,把制作过程中我的方法和经验分享给大家. 作 ...
定义html表格的大小和位置,点晴OA工作流表单设计：表格table及宏控件的HTML、CSS、字体参数教程详解...
点晴OA工作流表单设计:表格table及宏控件的HTML.CSS.字体参数教程详解说明:虽然点晴OA内置了强大的富文本编辑器,但是很多时候还是难以实现理想的精确显示效果,为了实现满意的显示效果,网 ...
CSS clear 属性取值详解
之前有整理过一部分知识点, 一直没有发布, 因为都是有关前端方面的零散内容; 现在想想无论分享什么内容都需要慢慢积累, 所以还是决定将之前整理的相关内容验证之后慢慢分享给大家这个专题就是工作 ...
css中的position定位详解
css中的position定位详解 position属性指定了元素的定位类型. position属性的5个值:static,relative,fixed,absolute,sticky; 元素可以使用 ...
CSS中的BFC BFC详解 BFC可以解决的问题汇总
CSS中的BFC BFC详解 BFC可以解决的问题汇总简介 BFC 全称 Block Formatting Context, 名为 "块级格式化上下文"它是CSS2.1规范定义的 ...
第7.26节 Python中的@property装饰器定义属性访问方法getter、setter、deleter 详解
第7.26节 Python中的@property装饰器定义属性访问方法getter.setter.deleter 详解一. 引言 Python中的装饰器在前面接触过,老猿还没有深入展开介绍装饰 ...
php 合并数组对象,JS内数组合并方法与对象合并实现步骤详解
这次给大家带来JS内数组合并方法与对象合并实现步骤详解,JS内数组合并方法与对象合并实现的注意事项有哪些,下面就是实战案例,一起来看一下. 1 数组合并 1.1 concat 方法var a=[1,2 ...

html图片垂直居中的方法,CSS图片垂直居中实现方法详解

html图片垂直居中的方法,CSS图片垂直居中实现方法详解相关推荐

最新文章

热门文章