码迷,mamicode.com
首页 > 其他好文 > 详细

居中显示两行字(补充)

时间:2015-06-02 19:25:00      阅读:148      评论:0      收藏:0      [点我收藏+]

标签:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        a{cursor: pointer;}
        ul{padding:0;border:0;margin:0;}
        ul li{list-style-type:none;}
        .ylBox{width:300px;background-color:#f2f2f2;height:500px;padding:20px;}
        .ylBox .ul{display:table;width:100%; vertical-align: middle;}
        .ul li{background-color:#FFF;}
        .ul .child{width:300px;display: table-cell;height: 60px;overflow: hidden;vertical-align: middle;}
        .ul .child .twoChild{max-height:35px;word-break: break-all;overflow: hidden;padding: 0 10px;vertical-align: middle;}
        .ul .child:hover{background-color:#000;color:#FFF;}
        .ul a{display:inline-block;}

    </style>


</head>
<body>
<div class="ylBox">
    <ul class="ul">
        <li>
            <a class="child" href="">
                <div class="twoChild">
                    我是个很长很长很长很长的名字哦
                </div>
            </a>
        </li>
    </ul>
</div>

</body>
</html>

  之前是没有在a里面加div,怎么调试都没有办法显示两行并且居中,加了div问题就解决了

居中显示两行字(补充)

标签:

原文地址:http://www.cnblogs.com/angleyuli/p/4546910.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!