CSS制作图片水平垂直居中_html/css_WEB-ITnose
所谓的图片水平垂直居中就是把图片放在一个容器元素中(容器大于图片尺寸或是指定了大小的容器),并且图片位居此容器正中间(中间是指元素容器的正中间),而图片不是以背景图片(background-image)形式展示,是以元素形式展示的。如下图所示:
解决问题??让图片水平垂直居中
解决水平居中是相当的容易,如果图片左浮动并且"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下实现起来也并不难,下面我们一起先来看看这个思路:
- 首先在图片的容器元素中设置“display:table-cell;vertical-align:middle;”实现现浏览器的垂直居中;
- 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(); });

핫 AI 도구

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

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

Undress AI Tool
무료로 이미지를 벗다

Clothoff.io
AI 옷 제거제

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

인기 기사

뜨거운 도구

메모장++7.3.1
사용하기 쉬운 무료 코드 편집기

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

스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경

드림위버 CS6
시각적 웹 개발 도구

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

뜨거운 주제











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

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

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

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

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

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

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

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