css 图片水平垂直居中实例小结

图片水平垂直居中是老梗，大部分人都做过，或者被面试时问过。但是下面这种0.873方法我是刚知道~~ mark一下。font-size:105 = 120*0.873
提供方法人： shenshenyan

span{display:table-cell;text-align:center; vertical-align:middle;*display:block;*font-family:aiarl;width:120px;height:120px;*font-size:105px;}
span img{vertical-align:middle;}

好了，我直接上代码大家可以使用，但可能不知道怎么来的，下面我们看实例

效果演示：

源代码：

 代码如下 复制代码

.box {
 /*非IE的主流浏览器识别的垂直居中的方法*/
 display: table-cell;
 vertical-align:middle;
 /*设置水平居中*/
 text-align:center;
 /* 针对IE的Hack */
 *display: block;
 *font-size: 175px;/*约为高度的0.873，200*0.873 约为175*/
 *font-family:Arial;/*防止非utf-8引起的hack失效问题，如gbk编码*/
 width:200px;
 height:200px;
 border: 1px solid #eee;
}
.box img {
 /*设置图片垂直居中*/
 vertical-align:middle;
 /*非IE6下的等比缩放*/
 max-height:150px;
 max-width:150px;
 /*IE6下的等比缩放，注意expression其实是运行了一个JS程序，所以如果图片很多的话会引起CPU占用率高*/
 width:expression(this.width >150 && this.height < = this.width ? 150: true);     height:expression(this.height > 150 && this.width < = this.height ? 150 : true);
}

注：以上方法在IE8下不推荐。可以使用在IE6，IE7，FF等。

时间： 2024-08-31 19:55:26

css 图片水平垂直居中实例小结的相关文章

css实现body背景图片水平垂直居中方法

 <style type="text/css"> *{margin:0; padding:0;} html,body{ width:100%; height:100%;} body{ background:#fff url(/eg/eg_2014_01_02_14_50.jpg) center no-repeat;} </style>   <div class="wrap"> <h2>让body标签中的背景图片水平垂直

CSS制作水平垂直居中对齐 多种方式各有千秋

在制作Web页面时都有碰到CSS制作水平垂直居中,我想大家都有研究过或者写过,平时工作收集了几种不同的方式制作垂直居中方法,但每种方法各有千秋在此与大家分享或许对初学者有所帮助   作为前端攻城师,在制作Web页面时都有碰到CSS制作水平垂直居中,我想大家都有研究过或者写过,特别的其中的垂直居中,更是让人烦恼.这段时间,我收 集了几种不同的方式制作垂直居中方法,但每种方法各有千秋呀,要正确的选择也是一件不容易的事情.我会将这几种方法一一介绍给大家,以供大家参考.或许对 于我这样的初学者有一定的帮

网页制作技巧:清除浮动和图片水平垂直居中

文章简介:网页制作技巧:清除浮动和图片水平垂直居中. 1.如何清除浮动 方法1: #test{clear:both;} #test为浮动元素的下一个兄弟元素 方法2: #test{display:block;zoom:1;overflow:hidden;} #test为浮动元素的父元素.zoom:1也可以替换为固定的width或height 方法3: #test{zoom:1;} #test:after{display:block;clear:both;visibility:hidden;hei

css中水平垂直居中对齐布局一些实例总结

水平居中,如果知道元素的宽度,则可以使用  代码如下 复制代码 .cell{width:300px; margin:0 auto; text-align:center;} 如果是内联元素居中,那么直接用text-align:center则行 如果未知元素宽度,并且非内联元素,那么下面给出的几种方案也适合你. 用CSS来实现元素的垂直居中效果是件苦差事,虽然说实现方法有多种,但有很多方式在某些浏览器下可能无法正常的工作.接下来我们就一起来看看这些不同方法实现垂直居中的各自优点和其不足之处. 方法一

css中水平垂直居中对齐布局实例总结

 水平居中,如果知道元素的宽度,则可以使用 代码如下 .cell{width:300px; margin:0 auto; text-align:center;}   如果是内联元素居中,那么直接用text-align:center则行 如果未知元素宽度,并且非内联元素,那么下面给出的几种方案也适合你. 用CSS来实现元素的垂直居中效果是件苦差事,虽然说实现方法有多种,但有很多方式在某些浏览器下可能无法正常的工作.接下来我们就一起来看看这些不同方法实现垂直居中的各自优点和其不足之处. 方法一: 这

CSS中未知高度水平垂直居中实例

关于 CSS 的未知高度水平垂直居中问题 关于 CSS 的未知高度水平垂直居中问题 关于 CSS 的未知高度水平垂直居中问题 关于 CSS 的未知高度水平垂直居中问题 关于 CSS 的未知高度水平垂直居中问题 关于 CSS 的未知高度水平垂直居中问题 关于 CSS 的未知高度水平垂直居中问题 关于 CSS 的未知高度水平垂直居中问题 关于 CSS 的未知高度水平垂直居中问题

CSS如何水平垂直居中？CSS水平垂直居中的方法汇总

直接进入主题! 一.脱离文档流元素的居中 方法一:margin:auto法 CSS代码: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 div{       width:400px;       height:400px;       position:relative;       border:1pxsolid#465468;  }  img{       position:absolute;       margin:auto;       top:0;       l

css div水平垂直居中几个例子

一.未知宽度水平居中  代码如下 复制代码 <!doctype html> <html> <head> <meta charset="utf-8"> <title>未知宽高div在页面内水平垂直居中</title> <style> *{margin:0; padding:0;} body,html{overflow:hidden; height:100%;} .box {height: 100%; ov

经常用的图片在容器中的水平垂直居中实例_javascript技巧

这是一个未知大小的图片在一个已知大小容器中的水平和垂直居中的例子,原文标题:"Centering an image of unknown size in an outer container of known size". 这个水平和垂直居中的例子能正常工作在IE5.x, IE6, IE7, Firefox, Opera, Mozilla, Netscape,为IE和非IE分别写了二套简单的样式. IE使用inline-blocks,非IE使用table-cell and vertic