css 垂直居中

一个老生常谈的问题,很多时候我都是用js去获取内容高度然后margin-top:-height/2来实现,今天鬼使神差的常试用的css解决,但发现除了IE8外,其它的浏览器都可以,感谢群里的AY童鞋帮助解决IE8的问题,原来IE8已经支持display:table,display:table-cell了。

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

<style type="text/css">

	* { padding:0; margin:0;}

	ul { list-style:none; margin:100px auto; width:500px;}

	li { width:100px; height:200px; float:left; margin-right:10px; border:1px solid #000;display:table; *display:block; zoom:1;}

	li span {display:table-cell; vertical-align:middle; *position:relative; top:50%;*display:block; width:100% ; text-align:center;}

	li span strong {margin:0 auto; *position:relative; top:-50%; display:block;}

</style>

</head>



<body>

<ul>

	<li><span><strong>Surprise double take Surprise double take</strong></span></li>

    <li><span><strong><img src="images/close_lightbox.jpg"  alt="" title="" /></strong></span></li>

    <li><span><strong><img src="images/wp-logo.png"  alt="" title="" /></strong></span></li>

</ul>

</body>

</html>

css 垂直居中

你可能感兴趣的:(垂直居中)