html5 垂直居中模拟table布局

最新推荐文章于 2023-01-02 16:26:14 发布

gzlxing

最新推荐文章于 2023-01-02 16:26:14 发布

阅读量1.8k

点赞数

分类专栏： html 文章标签： html5

本文链接：https://blog.csdn.net/qq_40238154/article/details/78607134

版权

html 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

模拟table布局

table 既不是内联元素也不是块级元素

table的基本格式代码:
<table>
   <tr>
       <td></td>
   </tr>
</table>

模拟table布局的相关代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .table{
            width: 400px;
            height: 160px;
            display: table;
            background-color: yellowgreen;
            margin: 0 auto;

        }
        .table_td{
            width:33.33%;
            display: table-cell;
            vertical-align: middle;
        }
        .table_tr{
            display: table-row;
            text-align:center;
        }
        img{
            height: 80px;
        }
        .line{
            height: 80px;
            width: 5px;
            background: white;
        }
    </style>
</head>
<body>
<div class="table">
    <div class="table_tr">
        <div class="table_td">
            <img src="../img/1111.gif" alt="">
        </div>
        <div class="line"></div>
        <div class="table_td">
            <img src="../img/1111.gif" alt="">
        </div>
        <div class="line"></div>
        <div class="table_td">
            <img src="../img/1111.gif" alt="">
        </div>
    </div>
    <div class="table_tr">
        <div class="table_td">
            <img src="../img/1111.gif" alt="">
        </div>
        <div class="line"></div>
        <div class="table_td">
            <img src="../img/1111.gif" alt="">
        </div>
        <div class="line"></div>
        <div class="table_td">
            <img src="../img/1111.gif" alt="">
        </div>
    </div>
</div>
</body>
</html>