怎么让图片在不同分辨率下都居中？
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了怎么让图片在不同分辨率下都居中？相关的知识，希望对你有一定的参考价值。
用div+css制作网页的时候，我遇到了这样的问题，打开这个网站http://mhzx.e70000.com/，顶部的大图片，在低于1280px分辨率下显示就是左对齐了，感觉很不协调，大家可以调节一下分辨率试试看，现在怎么才能在不同的分辨率下让这个图都能居中？
参考技术A 不是这个图的问题，是图下面的表格要居中 参考技术B 尽管有CSS的vertical-align特性，但是并不能有效解决未知高度的垂直居中问题（在一个DIV标签里有未知高度的文本或图片的情况下）。标准浏览器如Mozilla, Opera, Safari等.，可将父级元素显示方式设定为TABLE(display: table;) ，内部子元素定为table-cell (display: table-cell),通过vertical-align特性使其垂直居中，但非标准浏览器是不支持的。 非标准浏览器只能在子元素里设距顶部50%，里面再套个元素距顶部-50% 来抵消。 CSS: body padding: 0; margin: 0;body,htmlheight: 100%; #outer height: 100%; overflow: hidden; position: relative;width: 100%; background:ivory; #outer[id] display: table; position: static; #middle position: absolute; top: 50%; /* for explorer only*/ #middle[id] display: table-cell; vertical-align: middle; position: static; #inner position: relative; top: -50%;width: 400px;margin: 0 auto; /* for explorer only */ div.greenBorder border: 1px solid green; background-color: ivory; <div id="outer"> <div id="middle"> <div id="inner" class="greenBorder"> </div> </div> </div> 以上CSS代码的优点是没有hacks，采用了IE不支持的CSS2选择器#value[id]。 CSS2选择器#value[id]相当于选择器#value，但是Internet Explorer不支持这种类型的选择器。同样地.value[class]，相当于.value,这些只有标准浏览器能读懂。一种让超大banner图片不拉伸全屏宽居中显示的方法
现在很多网站的Banner图片都是全屏宽度的，这样的网站看起来显得很大气。这种Banner一般都是做一张很大的图片，然后在不同分辨率下都是显示图片的中间部分。实现方法如下：
<html> <head> <title>Title</title> <style> .bannerbox { width:100%; position:relative; overflow:hidden; height:500px; } .banner { width:1920px; /*图片宽度*/ position:absolute; left:50%; margin-left:-960px; /*图片宽度的一半*/ } </style> </head> <body> <div class="bannerbox"> <div class="banner"> <img src="t1.jpg"> </div> </div> </body> </html>
把css中 .bannerbox 中 height 及 .banner 和 width 换成你banner图的大小，然后 .banner 中margin-left 的值改成banner图宽度的一半即可。
以上是关于怎么让图片在不同分辨率下都居中？的主要内容，如果未能解决你的问题，请参考以下文章
如何让层Div在任何分辨率下都能居中显示？在线等.......急急急急.......