图片垂直居中的使用技巧

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

    <<style type="text/css">



         .box{

            width: 200px;

            height: 200px;

            background: red;

             /*非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编码*/



         }

         .box img{

            vertical-align:middle;

         }

    </style>

</head>

<body>

<div id="busyIcon"></div>

<div id="busyPageIcon"></div>

<div class="box">

        <img src="http://pics.taobao.com/bao/album/promotion/taoscars_180x95_071112_sr.jpg" />

</div>

“使用纯CSS实现未知尺寸的图片(但高宽都小于200px)在200px的正方形容器中水平和垂直居中。”

当然出题并不是随意，而是有其现实的原因，垂直居中是淘宝工作中最常遇到的一个问题，很有代表性。

题目的难点在于两点：

垂直居中；
图片是个置换元素，有些特殊的特性。

至于如何解决，下面是一个权衡的相对结构干净，CSS简单的解决方法：

本文转自艾伦 Aaron博客园博客，原文链接：http://www.cnblogs.com/aaronjs/archive/2012/10/18/2728868.html，如需转载请自行联系原作者

图片垂直居中的使用技巧相关推荐

图片垂直居中的CSS技巧
今天遇到的问题:使用纯CSS实现未知尺寸的图片在275px的正方形容器中(高宽都小于275px)水平和垂直居中. 主要在于:图片未知大小,而且要求垂直居中. 下面是找的一个权衡的相对结构干净,CSS简 ...
html5怎么让图片垂直居中显示,css中如何实现图片垂直居中显示？
css中如何实现图片垂直居中显示?下面本篇文章就来给大家介绍一下使用CSS实现图片垂直居中的方法.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 一.使用flex实现图片垂直居中利 ...
html5怎么把图片垂直居中,css如何让img垂直居中？
css如何让img居中显示?对于刚刚css入门的新手可能还不是很熟悉,下面我们来总结一下css如何让img垂直居中? 一.使用flex实现垂直居中利用 display: flex;align-ite ...
网站图片优化的小技巧分享
随着网站建设越来越多样化,网站的形式也逐渐随着用户的习惯在不断的变化,尤其是近来网站图文结合的形式给企业网站带来了更多的流量.但运用图文的方式也需要注重图片的优化才能更好的帮助网站赢取更多的推广效果, ...
position属性及实现图片垂直居中
转自: http://blog.onlygrape.com/position/186 定义 position 属性把元素放置到一个静态的.相对的.绝对的.或固定的位置中. span>positi ...
设置图片垂直居中line-height和vertical-align的区别
设置图片水平居中line-height和vertical-align的区别先看一个案例:目的是使图片相对于模块垂直居中 <!DOCTYPE html> <html lang=&qu ...
垂直居中及容器内图片垂直居中的CSS解决方法
方法一: <style type="text/css"> <!-- * {margin:0;padding:0} div { width:500px; h ...
讨论了好久的问题，IE、Firefox下CSS图片垂直居中的问题
通过百度和谷歌找了好久都没找着一个合适的方法.以下是自己找出的一种方法,自认为还可以,而且,也方便简单. IE:当容器为div,或者tr,只要把容器的Css属性line-height设置成容器的高度就 ...
a标签居中 img vue,让html img图片垂直居中的三种方法
三种让img元素图片在盒子内垂直居中的方式教程,依据代码与文章教程熟习掌握并加以应用. 一.使用flex完成垂直居中操纵css flex实现垂直居中.flex或许不是完成垂直居中最好的选择,由于IE ...

图片垂直居中的使用技巧

图片垂直居中的使用技巧相关推荐

最新文章

热门文章