css 在未知高度的容器内让内容垂直居中

a81cc2585063bce1810a18bf.jpg

这就是未知高度的垂直居中问题。在ie6下我没办法让 t(图中灰色块)有100%的高度。于是基于vertical-align:middle的垂直居中方法就不管用了。

这个写法用到了IeOnly的:writing-mode:tb-rl;这个属性,以及IE6下top:50%能正确定位到当前父容器高度的一半位置(padding-top:50%、margin-top:50%貌似不能得到这里想要的效果)

可以看到 t 被设置了高度,这个高度应该是介于 t 中文字竖排时候的高度和 A 最小高度之间的。

这中写法适合于不单独定义高度的情况,单独定义高度的话,写法就很多很多了……

<styletype="text/css">

<!--
body,ul,dl,dt,dd,h4{margin:0;padding:0;}
body{font-size:12px;}
.container{margin:20px auto;padding:5px;width:630px;border:1px solid #CCC;}
.list{position:relative;z-index:0;margin:0 auto;padding-left:15px;width:615px;border-bottom:1px dotted #ddd;overflow:hidden;}
.list h4{position:absolute;top:50%;left:0;margin-top:-30px;width:15px;height:60px;font-size:12px;background:#ccc;}
.list_title_add{display:table-cell;height:60px;vertical-align:middle;writing-mode:tb-rl;text-align:center;}
.list_title_add span{vertical-align:middle;}
.list dl{float:left;position:relative;z-index:0;width:300px;height:80px;}
.list dt{padding:5px 10px 0 15px;height:25px;line-height:25px;font-weight:800;font-size:14px;}
.list dt span{font-size:12px;font-weight:100;color:#999999;}
.list dd{padding:0 10px 0 15px;height:36px;overflow:hidden;}
.list dd ul{overflow:hidden;}
.list li{float:left;width:90px;height:18px;line-height:18px;overflow:hidden;}
.list li a,.list li a:visited{color:#666;}
.list li a:hover{color:#0657B2}
.list dd p{line-height:18px;color:#666;}
-->
</style>
<body>
<divclass="container">
<divclass="list">
<h4><spanclass="list_title_add"><span>标题</span></span></h4>
<dl>
<dt><ahref="#"title=""target="_blank">饮食男女</a><span>(今日新贴:578941)</span></dt>
<ddclass="clearall">
<ul>
<li><ahref="#"title=""target="_blank">旅游先遣队</a></li>
</ul>
</dd>
</dl>
<dl>
<dt><ahref="#"title=""target="_blank">饮食男女</a><span>(今日新贴:578941)</span></dt>
<ddclass="clearall">
<ul>
<li><ahref="#"title=""target="_blank">旅游先遣队</a></li>
<li><ahref="#"title=""target="_blank">结伴同行</a></li>
<li><ahref="#"title=""target="_blank">游玩杭州</a></li>
</ul>
</dd>
</dl>
<dl> 欢迎转载但请注明出处 Email:See7di@Gmail.com , Seven的部落格 http://hi.baidu.com/see7di/home
<dt><ahref="#"title=""target="_blank">饮食男女</a><span>(今日新贴:578941)</span></dt>
<ddclass="clearall">
<ul>
<li><ahref="#"title=""target="_blank">旅游先遣队</a></li>
<li><ahref="#"title=""target="_blank">结伴同行</a></li>
</ul>
</dd>
</dl>
<dl>
<dt><ahref="#"title=""target="_blank">饮食男女</a><span>(今日新贴:578941)</span></dt> </dl>
<dl>
<dt><ahref="#"title=""target="_blank">饮食男女</a><span>(今日新贴:578941)</span></dt>
<ddclass="clearall">
<ul>
<li><ahref="#"title=""target="_blank">旅游先遣队</a></li> </ul> </dd> </dl> <dl>
<dt><ahref="#"title=""target="_blank">饮食男女</a><span>(今日新贴:578941)</span></dt>
<ddclass="clearall">
<ul> 欢迎转载但请注明出处 Email:See7di@Gmail.com , Seven的部落格 http://hi.baidu.com/see7di/home
<li><ahref="#"title=""target="_blank">旅游先遣队</a></li>
</ul>
</dd>
</dl>
</div>
</div>
</body>
</html>

转载于:https://www.cnblogs.com/see7di/archive/2011/06/30/2239693.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值