목차
解决问题??让图片水平垂直居中
3、display:table模拟表格实现图片垂直居中
4、jQuery方法实现图片居中
웹 프론트엔드 HTML 튜토리얼 CSS制作图片水平垂直居中_html/css_WEB-ITnose

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

Jun 24, 2016 am 11:51 AM

所谓的图片水平垂直居中就是把图片放在一个容器元素中(容器大于图片尺寸或是指定了大小的容器),并且图片位居此容器正中间(中间是指元素容器的正中间),而图片不是以背景图片(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

<ul class="imgWrap clearfix">                <li><a href="#" class="imgBox"><span></span><img src="/static/imghw/default1.png"  data-src="images/img1.jpg"  class="lazy" alt="" /></a></li>                <li><a href="#" class="imgBox"><span></span><img src="/static/imghw/default1.png"  data-src="images/img2.jpg"  class="lazy" alt="" /></a></li>                <li><a href="#" class="imgBox"><span></span><img src="/static/imghw/default1.png"  data-src="images/img3.jpg"  class="lazy" alt="" /></a></li>                <li><a href="#" class="imgBox"><span></span><img src="/static/imghw/default1.png"  data-src="images/img4.jpg"  class="lazy" alt="" /></a></li>            </ul>        
로그인 후 복사

<style type="text/css">                .imgWrap li {                    float: left;                    border: solid 1px #666;                    margin: 10px 10px 0 0;                    list-style: none;                    border-collapse: collapse;                 }                .imgWrap a {                    background: #ffa url(images/gridBg.gif) repeat center;                    width: 219px;                    height: 219px;                    display: table-cell;/*图片容器以表格的单元格形式显示*/                    text-align: center; /* 实现水平居中 */                    vertical-align: middle; /*实现垂直居中*/                                    }                .imgWrap a:hover {                    background-color: #dfd;                }                .imgWrap img {                    border: solid 1px #66f;                    vertical-align: middle; /*图片垂直居中*/                }                </style>                <!--下面是解决IE6-7的正常显示的代码-->                <!--[if lt IE 8]>                    <style type="text/css">                    .imgWrap a {                        display: block;                    }                    .imgWrap span {                        display: inline-block;                        vertical-align: middle;                        height: 100%;                    }                    .imgWrap {                        _height: 0;                        zoom: 1;                    }                    </style>                <![endif]-->
로그인 후 복사

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

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

<ul class="imgWrap clearfix">                <li><a href="#" class="imgBox"><span></span><img src="/static/imghw/default1.png"  data-src="images/img1.jpg"  class="lazy" alt="" /></a></li>                <li><a href="#" class="imgBox"><span></span><img src="/static/imghw/default1.png"  data-src="images/img2.jpg"  class="lazy" alt="" /></a></li>                <li><a href="#" class="imgBox"><span></span><img src="/static/imghw/default1.png"  data-src="images/img3.jpg"  class="lazy" alt="" /></a></li>                <li><a href="#" class="imgBox"><span></span><img src="/static/imghw/default1.png"  data-src="images/img4.jpg"  class="lazy" alt="" /></a></li>            </ul>
로그인 후 복사

<style type="text/css">                .imgWrap li{                     width: 219px;                    height: 219px;                    float: left;                    border: solid 1px #666;                    margin: 10px 10px 0 0;                    list-style: none;                    text-align: center;                    font-size: 0;                }                .imgWrap a {                    display: block;                    height: 100%;                    background: #ffa url(images/gridBg.gif) repeat center;                }                .imgWrap a:hover {                    background-color: green;                }                .imgWrap span {                    display: inline-block;/*将行内元素改变为行内块元素显示*/                    width: 1px;/*实现IE下可读效果*/                    height: 100%;/*使用元素高度和图片容器高度一样*/                    vertical-align: middle;/*垂直对齐*/                }                .imgWrap img {                    vertical-align: middle;                }            </style>
로그인 후 복사

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

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

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

<ul class="imgWrap clearfix">                <li>                    <div class="table">                        <div class="tableCell">                            <a href="#" class="imgBox"><img src="/static/imghw/default1.png"  data-src="images/img1.jpg"  class="lazy" alt="" /></a>                        </div>                    </div>                    </li>                <li>                    <div class="table">                        <div class="tableCell">                            <a href="#" class="imgBox"><img src="/static/imghw/default1.png"  data-src="images/img2.jpg"  class="lazy" alt="" /></a>                        </div>                    </div>                    </li>                <li>                    <div class="table">                        <div class="tableCell">                            <a href="#" class="imgBox"><img src="/static/imghw/default1.png"  data-src="images/img3.jpg"  class="lazy" alt="" /></a>                        </div>                    </div>                    </li>                <li>                    <div class="table">                        <div class="tableCell">                            <a href="#" class="imgBox"><img src="/static/imghw/default1.png"  data-src="images/img4.jpg"  class="lazy" alt="" /></a>                        </div>                    </div>                    </li>            </ul>    
로그인 후 복사

.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

            <ul class="imgWrap clearfix">                <li><a href="#" class="imgBox"><img src="/static/imghw/default1.png"  data-src="images/img1.jpg"  class="lazy" alt="" /></a></li>                <li><a href="#" class="imgBox"><img src="/static/imghw/default1.png"  data-src="images/img2.jpg"  class="lazy" alt="" /></a></li>                <li><a href="#" class="imgBox"><img src="/static/imghw/default1.png"  data-src="images/img3.jpg"  class="lazy" alt="" /></a></li>                <li><a href="#" class="imgBox"><img src="/static/imghw/default1.png"  data-src="images/img4.jpg"  class="lazy" alt="" /></a></li>            </ul>    
로그인 후 복사

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();            });
로그인 후 복사

 

본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

핫 AI 도구

Undresser.AI Undress

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

Clothoff.io

AI 옷 제거제

AI Hentai Generator

AI Hentai Generator

AI Hentai를 무료로 생성하십시오.

인기 기사

R.E.P.O. 에너지 결정과 그들이하는 일 (노란색 크리스탈)
3 몇 주 전 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. 최고의 그래픽 설정
3 몇 주 전 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. 아무도들을 수없는 경우 오디오를 수정하는 방법
3 몇 주 전 By 尊渡假赌尊渡假赌尊渡假赌
WWE 2K25 : Myrise에서 모든 것을 잠금 해제하는 방법
3 몇 주 전 By 尊渡假赌尊渡假赌尊渡假赌

뜨거운 도구

메모장++7.3.1

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

& lt; Progress & Gt의 목적은 무엇입니까? 요소? & lt; Progress & Gt의 목적은 무엇입니까? 요소? Mar 21, 2025 pm 12:34 PM

이 기사는 HTML & lt; Progress & Gt에 대해 설명합니다. 요소, 그 목적, 스타일 및 & lt; meter & gt의 차이; 요소. 주요 초점은 & lt; progress & gt; 작업 완료 및 & lt; meter & gt; Stati의 경우

& lt; datalist & gt의 목적은 무엇입니까? 요소? & lt; datalist & gt의 목적은 무엇입니까? 요소? Mar 21, 2025 pm 12:33 PM

이 기사는 HTML & LT; Datalist & GT에 대해 논의합니다. 자동 완성 제안을 제공하고, 사용자 경험을 향상시키고, 오류를 줄임으로써 양식을 향상시키는 요소. 문자 수 : 159

& lt; meter & gt의 목적은 무엇입니까? 요소? & lt; meter & gt의 목적은 무엇입니까? 요소? Mar 21, 2025 pm 12:35 PM

이 기사는 HTML & lt; meter & gt에 대해 설명합니다. 범위 내에 스칼라 또는 분수 값을 표시하는 데 사용되는 요소 및 웹 개발의 일반적인 응용 프로그램. & lt; meter & gt; & lt; Progress & Gt; 그리고 Ex

HTML5의 크로스 브라우저 호환성에 대한 모범 사례는 무엇입니까? HTML5의 크로스 브라우저 호환성에 대한 모범 사례는 무엇입니까? Mar 17, 2025 pm 12:20 PM

기사는 HTML5 크로스 브라우저 호환성을 보장하기위한 모범 사례에 대해 논의하고 기능 감지, 점진적 향상 및 테스트 방법에 중점을 둡니다.

HTML5 양식 유효성 검사 속성을 사용하여 사용자 입력을 유효성있게하려면 어떻게합니까? HTML5 양식 유효성 검사 속성을 사용하여 사용자 입력을 유효성있게하려면 어떻게합니까? Mar 17, 2025 pm 12:27 PM

이 기사에서는 브라우저에서 직접 사용자 입력을 검증하기 위해 필요한, Pattern, Min, Max 및 Length 한계와 같은 HTML5 양식 검증 속성을 사용하는 것에 대해 설명합니다.

뷰포트 메타 태그는 무엇입니까? 반응 형 디자인에 중요한 이유는 무엇입니까? 뷰포트 메타 태그는 무엇입니까? 반응 형 디자인에 중요한 이유는 무엇입니까? Mar 20, 2025 pm 05:56 PM

이 기사는 모바일 장치의 반응 형 웹 디자인에 필수적인 Viewport Meta Tag에 대해 설명합니다. 적절한 사용이 최적의 컨텐츠 스케일링 및 사용자 상호 작용을 보장하는 방법을 설명하는 반면, 오용은 설계 및 접근성 문제로 이어질 수 있습니다.

html5 & lt; time & gt; 의미 적으로 날짜와 시간을 나타내는 요소? html5 & lt; time & gt; 의미 적으로 날짜와 시간을 나타내는 요소? Mar 12, 2025 pm 04:05 PM

이 기사는 html5 & lt; time & gt; 시맨틱 날짜/시간 표현 요소. 인간이 읽을 수있는 텍스트와 함께 기계 가독성 (ISO 8601 형식)에 대한 DateTime 속성의 중요성을 강조하여 Accessibilit를 향상시킵니다.

& lt; iframe & gt; 꼬리표? 보안을 사용할 때 보안 고려 사항은 무엇입니까? & lt; iframe & gt; 꼬리표? 보안을 사용할 때 보안 고려 사항은 무엇입니까? Mar 20, 2025 pm 06:05 PM

이 기사는 & lt; iframe & gt; 외부 컨텐츠를 웹 페이지, 공통 용도, 보안 위험 및 객체 태그 및 API와 같은 대안을 포함시키는 태그의 목적.

See all articles