table 居中布局

最新推荐文章于 2022-04-18 01:51:19 发布

weixin_33819479

最新推荐文章于 2022-04-18 01:51:19 发布

阅读量164

点赞数

原文链接：https://juejin.im/post/5a4daf17f265da432d288436

版权

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>下边框制作</title>
    <style>
        .table {
            width: 500px;
            border: 1px solid red;
            display: table;
            text-align: center;
            margin: 0;
        }
        a {
            color: #333;
            /* table-row 此元素会作为一个表格行显示（类似 <tr>）*/
            display: table-row;
        }
        span {
            /* table-cell 此元素会作为一个表格单元格显示（类似 <td> 和 <th>）*/
            display: table-cell;
        }
    </style>
</head>
<body>
<div class="goods-advantages table">
    <a>
        <span>李斯</span>
        <span>晚生的悲惨遭遇</span>
        <span>是不可避免的</span>
    </a>
</div>
<div class="goods-advantages table">
    <a>
        <span>因为他的"老鼠哲学"</span>
        <span>让他只重追求荣华富贵</span>
    </a>
</div>
</body>
</html>
复制代码

优势：兼容性好，flex布局同样可以做到，但是兼容性不是很好，不适合PC端。