记录display:table的使用

兼容性：不兼容IE7

1.左右对齐

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>左右两端布局</title>

    <style>

    .table {

        display: table;

        border: 1px solid #06c;

        padding: 15px;

        width: 100%;

    }

    .table .table-left {

        text-align: left;

        display: table-cell

    }

    .table .table-right {

        text-align: right;

        display: table-cell

    }

    .table .table-content {

        width: 100px;

        height: 100px;

        border: 1px solid #ccc;

        text-align: center;

        display: inline-block;

        font-size: 40px;

        line-height: 100px;

    }

    </style>

</head>

<body>

    <div class="table">

        <div class="table-left">

            <div class="table-content">左边</div>

        </div>

        <div class="table-right">

            <div class="table-content">右边</div>

        </div>

    </div>

</body>

</html>

2.居中

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>图片居中对齐</title>

    <style>

    * {

        box-sizing: border-box;

    }

    .table {

        display: table;

        border: 1px solid #06c;

        padding: 5px;

        max-width: 1000px;

        margin: 10px auto;

        width: 100%;

    }

    .table-center {

        height: 150px;

        width: 100px;

        border: 1px solid red;

        display: table-cell;

        vertical-align: middle;

        text-align: center;

        background-color: #4679bd;

    }

    </style>

</head>

<body>

    <div class="table">

        <div class="table-center">

            <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1556086970323&di=51c11bb425e5f92ca3c9e455aad95675&imgtype=0&src=http%3A%2F%2Fpic.58pic.com%2F58pic%2F13%2F20%2F57%2F95i58PIC6Qh_1024.jpg" width="50px" height="50px" alt="logo" />

        </div>

    </div>

</body>

</html>

3.平均分

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>平均分</title>

    <style>

    * {

        box-sizing: border-box;

    }

    .table {

        display: table;

        border: 1px solid #000;

        padding: 5px;

        max-width: 1000px;

        margin: 0 auto;

        width: 100%;

    }

    .table ul {

        display: table;

        width: 100%;

        padding: 0;

        border-right: 1px solid #ccc;

    }

    .table ul li {

        display: table-cell;

        border: 1px solid #ccc;

        text-align: center;

        height: 100px;

        border-right: none;

        line-height: 100px;

    }

    </style>

</head>

<body>

    <div class="table">

        <ul>

            <li>1</li>

            <li>2</li>

            <li>3</li>

            <li>4</li>

            <li>5</li>

        </ul>

    </div>

</body>

</html>

巴特西

记录display:table的使用

兼容性：不兼容IE7

1.左右对齐

2.居中

3.平均分

最新文章

热门文章