浏览 7732 次
|
锁定老帖子 主题：这全Div布局中,文本的纵向居中该怎么处理
该帖已经被评为新手帖
|
|
|---|---|
| 作者 | 正文 |
|
发表时间：2006-12-31
附图中,"ccc"文字所在格子文字就是无法居中,第二个问题,就是为什么设了该格子的高度后,就和周围格子有了间距??
<html>
<body>
<style>
.equal {
display:table;
border-collapse:separate;
}
.row {
display:table-row;
}
.row div {
display:table-column;
}
.row .one {
width:200px;
border:1px dotted green;
float:right;
}
.row .two {
border: 1px double red;
width:200px;
float:right;
}
.row .three {
text-align:center;
vertical-align:middle;
border:1px dotted gray;
height:100px;
}
.row .forth {
border:1px dotted blue;
float:left;
}
.celltext {
position:relative;
vertical-align:middle;
}
</style>
<div class="equal">
<div class="row">
<div class="forth">ddddd</div> <div class="one">aaaaa</div><div class="two">bbbb</div><div class="three"><span class="celltext">cccc</span></div>
</div>
<div class="row">
<div >11111</div><div>2222</div><div >33333</div>
</div>
</div>
</body>
</html>
声明：ITeye文章版权属于作者，受法律保护。没有作者书面许可不得转载。
推荐链接
|
| 返回顶楼 | |
|
发表时间：2006-12-31
http://www.w3cn.org/article/step/index.html
这里应该能找到答案 |
| 返回顶楼 | |
|
发表时间：2006-12-31
IE 是不支持 display:table-* 的 所以 这样写在IE里没有用的（包括 IE7）
另外 <style> 需要写在 <head> 里面 |
| 返回顶楼 | |
|
发表时间：2006-12-31
把
height:100px; 替换成 line-height:100px; |
| 返回顶楼 | |
|
发表时间：2007-01-02
<div style="position:absolute;top:431;left:445" he="" width="">
|
| 返回顶楼 | |
