css如何实现未知宽高div中图片垂直水平居中效果_html/css_WEB-ITnose

WBOY
Freigeben: 2016-06-24 11:29:08
Original
986 Leute haben es durchsucht

css如何实现未知宽高div中图片垂直水平居中效果:
在有时候可能有这样的情况,那就是想让一个图片在div中实现垂直水平居中效果,但是有时候div的尺寸是位置的,下面通过代码实例介绍一下在这种情况下如何实现图片的垂直水平居中效果。
代码如下:
实例一:

<!DOCTYPE html><html><head><meta charset=" utf-8"><meta name="author" content="http://www.softwhy.com/" /><title>蚂蚁部落</title><style type="text/css">#thediv{  width:200px;  height:200px;  background:red;  text-align:center;  display:table-cell;   vertical-align:middle;}</style></head><body><div id="thediv"><img  src="mytest/demo/1.jpg" alt="css如何实现未知宽高div中图片垂直水平居中效果_html/css_WEB-ITnose" ></div></body></html>
Nach dem Login kopieren

上面你的代码可以让图片垂直水平居中,当然这里,div的尺寸是固定的,只是为了演示用的,未知尺寸也是可以实现垂直水平居中的,关键代码如下:

display:table-cell; vertical-align:middle;
Nach dem Login kopieren

代码存在一定的兼容问题,当然问题不大,因为IE7和IE6浏览器很快就被淘汰了.

原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=14774

更多内容可以参阅:http://www.softwhy.com/divcss/

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage