• 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>
  • 相关阅读:
    13.Convert BST to Greater Tree(将树转为更大树)
    13.调用数组顺序使奇数位于偶数前面
    12.数值的整数次方
    11.二进制中1的个数
    12.Hamming Distance(汉明距离)
    11.Find All Numbers Disappeared in an Array(找出数组中缺失的数)
    10.Find All Anagrams in a String(在一个字符串中发现所有的目标串排列)
    垃圾收集器与内存分配策略---垃圾收集器
    线程之间的协作
    1287. Mars Canals(DP)
  • 原文地址:https://www.cnblogs.com/see7di/p/2239693.html
Copyright © 2020-2023  润新知