|
垂直居中是css里面的一个难点所在之一
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GB2312" />
<title>内容的垂直居中</title>
<style type="text/css">
<!--
.box{
float:left;
margin:2px;
}
.outer {
height: 500px;
width: 240px;
overflow: hidden;
background:#ddd;
position: static !important;
position: relative;
display: table !important;
}
.middle { /* for IE */
position: absolute;
top: 50%;
}
.middle[class] {
display: table-cell;
vertical-align: middle;
position: static;
}
.content { /* for IE */
position: relative;
top: -50%;
width: 100%;
margin: 0 auto;
text-align:center
}
</style>
</head>
<body>
XHTML div css 布局垂直居中演示
<div class="box">
<div class="outer">
<div class="middle">
<div class="content"><a href="http://www.div-css.com/f/file/valign/img.jpg"><img src="http://www.div-css.com/f/file/valign/img1.jpg" alt="css的垂直居中" /></a></div>
</div>
</div>
</div>
<div class="box">
<div class="outer">
<div class="middle">
<div class="content">
<img src="http://www.div-css.com/f/file/valign/img1.jpg" alt="css的垂直居中" /><br /><br />
<img src="http://www.div-css.com/f/file/valign/img1.jpg" alt="css的垂直居中" /> <br /> <br /> <br /> <br /> content
</div>
</div>
</div>
</div>
<div class="box">
<div class="outer">
<div class="middle">
<div class="content">XHTML div css 布局垂直居中演示。图片与文本内容混合<br /><img src="http://www.div-css.com/f/file/valign/img1.jpg" alt="css的垂直居中" /><br />图片与文本内容混合</div>
</div>
</div>
</div>
<div class="box">
<div class="outer">
<div class="middle">
<div class="content"><span>图片与文本垂直居中</span><img src="http://www.div-css.com/f/file/valign/img1.jpg" alt="css的垂直居中" align="middle" /><span>图片与文本</span></div>
</div>
</div>
</div>
<div class="box">
<div class="outer">
<div class="middle">
<div class="content">这里演示多行文本的垂直居中问题<br />Web标准化<br /><a href="www.div-css.com
http://www.div-css.com">www.div-css.com</a><br />这里演示多行文本的垂直居中问题
</div>
</div>
</div>
</div>
</body>
</html>
|
一共有 0 条评论