zoukankan      html  css  js  c++  java
  • css 在未知高度的容器内让内容垂直居中

    这就是未知高度的垂直居中问题。在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>
  • 相关阅读:
    ASP.NET CORE3.0 API Swagger+IdentityServer4授权验证
    Ubuntu16.04安装RabbitMq并设置用户
    使用sql实现表90度旋转(矩阵转置)
    HDWiKi新架设网站打开慢原因排查1.4秒→0.03秒
    手机端网页设置了csswidth:100%,但不能显示完整的问题
    SQL Server 2008 收缩日志
    MSSQL查看一个数据库中所有表的行数
    那就简单说说这个服务器吧,题外话。
    win7单独安装php
    css兼容写法
  • 原文地址:https://www.cnblogs.com/see7di/p/2239693.html
Copyright © 2011-2022 走看看