CSS:当没有固定大小的div已知时,垂直alignmentdiv

如何将包含图像(或闪光灯)的<div>与CSS垂直alignment。 高度和宽度是dynamic的。

这是一个纯粹的CSS2解决scheme,用于水平和垂直居中,无需知道容器和子项的大小。 没有黑客参与。 我发现这个答案 ,我也在这个答案中展示了它。

该解决scheme基于vertical-align: middleline-height: 0 ,该父级具有固定的行高。

HTML:

 <span id="center"> <span id="wrap"> <img src="http://lorempixum.com/300/250/abstract" alt="" /> </span> </span> 

而CSS:

 html, body { height: 100%; width: 100%; padding: 0; margin: 0; overflow: hidden; } #center { position: relative; display: block; top: 50%; margin-top: -1000px; height: 2000px; text-align: center; line-height: 2000px; } #wrap { line-height: 0; } #wrap img { vertical-align: middle; } 

在Win7上testingIE8,IE9,Opera 11.51,Safari 5.0.5,FF 6.0,Chrome 13.0。

唯一需要注意的是IE7,这两个最内层的元素必须在一行中声明,正如这个小提琴演示的那样 :

 <span id="center"> <span id="wrap"><img src="http://lorempixum.com/300/250/abstract" alt="" /></span> </span> 

请注意,跨度也是IE7所必需的。 在其他浏览器中,跨度可能是div的。

你可以通过使用内嵌块来实现这一点,一个是height: 100%HTMLBODY高度相同)和vertical-align: middle

例1: http : //jsfiddle.net/kizu/TQX9b/ (很多内容,所以它是全宽)

示例2: http : //jsfiddle.net/kizu/TQX9b/2/ (任何大小的图像)

在这个例子中,我使用span s,所以它将在IE浏览器中工作,如果你想使用div ,不要忘记添加条件注释IE .helper, .content { display: inline; zoom: 1; } .helper, .content { display: inline; zoom: 1; } .helper, .content { display: inline; zoom: 1; } ,所以内联块可以用于块元素。

除了这里的其他答案之外, CSS3灵活盒子模型还可以帮助你实现这一点。

你只需要一个容器元素。 里面的所有东西都将根据灵活的盒子模型规则进行布置。

 <div class="container"> <img src="/logo.png"/> </div> 

实际上,CSS非常简单:

 .container { display: box; box-orient: horizontal; box-pack: center; box-align: center; } 

为了简洁,我省略了供应商前缀的规则。

这是一个演示,其中img总是在页面的中心: http : //jsfiddle.net/zn8bm/

请注意,Flexbox是一个刚起步的规范,目前只在Safari,Chrome和Firefox 4 +中实现。

我会推荐这个解决scheme由布鲁诺: http : //www.brunildo.org/test/img_center.html

但是,我遇到了一个问题,他的解决schemew / r / t webkit。 看来,如果允许空的span在那里,webkit在div顶部呈现一个小空间。 所以,对于我的解决scheme,我只添加空的跨度,如果我发现浏览器是IE浏览器(如果有人知道如何摆脱空间,让我知道!)所以,我的解决scheme最终是:


HTML:

 <div class="outerdiv"> <img src="..." /> </div> 

CSS:

 .outerdiv { display: table-cell; width: 200px; height: 150px; text-align: center; vertical-align: middle; } .ie_vertical_align * { vertical-align: middle; } .ie_vertical_align span { display: inline-block; height: 150px; width: 0; } 

如果我检测到浏览器是IE浏览器,我添加一个空的span元素之前的img标签和CSS样式,所以它看起来像:

 <div class="outerdiv ie_vertical_align"> <span></span> <img src="..." /> </div> 

这是一个JSFiddle这个代码。

捷克网页开发人员DušanJanovský在不久前发表了一个跨浏览器的解决scheme。 阅读http://www.jakpsatweb.cz/css/css-vertical-center-solution.html

如果你不关心IE7和以下,你不必使用多个嵌套的div。 如果你有一个你想垂直alignment的div,那个div在某个容器内(即使容器是你的<body> )。 因此,您可以在容器上指定display: table-cellvertical-align: middle ,然后您的div将被垂直居中。

但是,如果你关心IE7及以下版本,你将需要一个额外的容器来使其工作(是的,通过黑客)。

看看这个小提琴 。 它在IE6-9和其他主stream浏览器中正确显示。 #container2仅适用于IE7及其以下版本,因此如果您不关心它们,则可以将其删除以及特定于IE的条件样式。

将图像设置为div的背景并将其alignment

尝试50%的填充技巧:

 <html> <body style="width:50%; height: 50%;"> <div style="display:block; display:inline-block; layout-grid:line; text-align:center; vertical-align:bottom; padding: 50% 0 50% 0">test</div> </body> </html> 

这是可能的,如果你知道的图像或Flash对象的中心的高度。 你不需要知道容器的高度/宽度,但是你需要知道容器的高度/宽度。

有可能使用浮动,清晰和负边距。 例如: http://www.laurenackley.com主页。;

HTML

 <div id='container'><!-- container can be BODY --> <div id='vertical-center'>&nbsp;</div> <div id='contained-with-known-height'> <p>stuff</p> </div> </div> 

CSS

 #vertical-center{ height:50%; width:1px; float:left; margin-bottom:-50px;/** 1/2 of inner div's known height **/ } #contained-with-known-height{ height:100px; clear:left; margin:0 auto;/** horizontal center **/ width:700px; text-align:left; } #container{/** or body **/ text-align:center; /** width and height unknown **/ } 

如果你不知道内部元素的宽度/高度。 你用<div>运气不好。 但是 – 表格单元<td> )确实支持vertical-align:middle; 如果你不能用上面的div来完成,那么在容器中放一张桌子,把你正在居中的div放在一个垂直居中的td里面。