欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

CSS制作图片水平垂直居中_html/css_WEB-ITnose

程序员文章站 2023-12-30 22:22:52
...
所谓的图片水平垂直居中就是把图片放在一个容器元素中(容器大于图片尺寸或是指定了大小的容器),并且图片位居此容器正中间(中间是指元素容器的正中间),而图片不是以背景图片(background-image)形式展示,是以CSS制作图片水平垂直居中_html/css_WEB-ITnose元素形式展示的。如下图所示:

解决问题??让图片水平垂直居中

解决水平居中是相当的容易,如果图片左浮动并且"display:inline"时,我们只要给图片设置一个"text-align:center"属性,就顺利解决了水平居中。

对于垂直居中的最佳解决方案,在现代浏览器中,我们可以给图片容器设置“dipslay:table-cell;vertical-align:middle”, 这种方法能顺利的让图片实现垂直居中,但只能在现代浏览器运行,在IE6-7中无法正常运。这样一来是不是将无法实现呢?大家别急,我们一起来看下面的几种方法:

1、table-cell加上display:inline

这种方法很神奇,前面我们说过用display-table和vertical-middle是在现代浏览器中实现图片垂直居中是最佳办法,只是IE6-7不支持display:table-cell,其实并不是那么严重,我们只要在IE6-7下给他来个另外的写法。其实掌握了原理在IE下实现起来也并不难,下面我们一起先来看看这个思路:

  1. 首先在图片的容器元素中设置“display:table-cell;vertical-align:middle;”实现现浏览器的垂直居中;
  2. IE6-7有一个好的办法,就是创建一个线盒,此线盒的高度和图片容器的高度一样,并且给这个线盒也设置“vertical-align:middle”。

接下来的关键是给IE6-7创建线盒,还好IE6-7下部分显示支持“dipslay:inline-block”。这样我们就可以在图片的容器中创建一个空元素(比如说span),并且设置span的“display:inline-block;height:100%;vertical-align:middle”。

创建线盒中有一个细节需要注意,在IE6-7中空的line-block元素宽度为“0”,这样在IE6-7下是没有效果的,此时我们需要给span加上“width:1px”,此时会给水平居中造成1px的误差,但这种bug你是可以接受得了的。

那么最终解决方案就是使用display:table-cell和设置了display:inline-block的线合span。当然其中还是需要为IE写一点特殊的代码,接下来我们的起来看代码:

HTML Markup


  • CSS制作图片水平垂直居中_html/css_WEB-ITnose
  • CSS制作图片水平垂直居中_html/css_WEB-ITnose
  • CSS制作图片水平垂直居中_html/css_WEB-ITnose
  • CSS制作图片水平垂直居中_html/css_WEB-ITnose

2、空白标签实现图片的垂直居中

将span行内元素设置为行内块元素,也就是将其display设置为“inline-block”,将其宽度定位1px,height为容器的100%,这样高度可以和容器的高度达到一样,然后通过“vertical-align:middle”设置垂直对齐,从而实现所需要的效果。本人感觉这个方法优于上面那个方法,最主要的不要单独给IE写效果,而且易懂


  • CSS制作图片水平垂直居中_html/css_WEB-ITnose
  • CSS制作图片水平垂直居中_html/css_WEB-ITnose
  • CSS制作图片水平垂直居中_html/css_WEB-ITnose
  • CSS制作图片水平垂直居中_html/css_WEB-ITnose

3、display:table模拟表格实现图片垂直居中

接下来要说的这种方法是结构有点复杂,而且在IE6-7事要配合hack来产现。这个方法就是模拟表格的形式来实现图片垂直居中的效果。

表格大家都知道,他有行(table-row)单元格(table-cell),众所周知,表格单元格中“vertical-align: middle”能让元素垂直居中,那么下面这个实例就是利用这种原理来制作的,一起来看代码


  • CSS制作图片水平垂直居中_html/css_WEB-ITnose
  • CSS制作图片水平垂直居中_html/css_WEB-ITnose
  • CSS制作图片水平垂直居中_html/css_WEB-ITnose
  • CSS制作图片水平垂直居中_html/css_WEB-ITnose

.imgWrap li {                background: #ffa url(images/gridBg.gif) repeat center;                width: 219px;                height: 219px;                float: left;                border: solid 1px #666;                margin: 10px 10px 0 0;                list-style: none;                text-align: center;            }            .table {                width: 100%;                height: 100%;                display: table;                position: relative;            }                    .tableCell {                                display: table-cell;                vertical-align: middle;                text-align: center;                            padding: 10px;                *position: absolute;                *top: 50%;                *left: 50%;            }            .imgWrap a {                display: block;                *position:relative;                *top: -50%;                *left: -50%;            }

4、jQuery方法实现图片居中

这个方法很简单,就是得用jQuery方法,将图片转换为其父元素的背景图片,并且在其父元素中居中显示背景图片,然后在将其自身的透明度设置为“0”, 这样也能达到图片居中的效果。

Html Markup

            
  • CSS制作图片水平垂直居中_html/css_WEB-ITnose
  • CSS制作图片水平垂直居中_html/css_WEB-ITnose
  • CSS制作图片水平垂直居中_html/css_WEB-ITnose
  • CSS制作图片水平垂直居中_html/css_WEB-ITnose

CSS Code

            .imgWrap li {                float: left;                border: solid 1px #666;                margin: 10px 10px 0 0;                list-style: none;                background: #ffa url(images/gridBg.gif) repeat center;            }            .imgWrap a {                width: 219px;                height: 219px;                display: block;            }

jQuery Code

            //先写一个小插件            $.fn.imgVAlign=function(){                return $(this).each(function(i){                    //获取图片的src值,并定义给变量bg                    var bg = $(this).attr("src");                    //给图片的父元素定义背景图片的样式,并且背景图片                    $(this).parent().css({"background": "url("+ bg +") no-repeat center center"                    });                    //将图片隐藏                    $(this).css("opacity","0");                });            }            //调用上面写的插件            $(document).ready(function(){                $(".imgBox img").imgVAlign();            });

上一篇:

下一篇: