display: table-cell的一些用法

最新推荐文章于 2022-01-02 16:59:19 发布

HzDoctor

最新推荐文章于 2022-01-02 16:59:19 发布

阅读量798

点赞数

分类专栏： css 文章标签： css

本文链接：https://blog.csdn.net/qq_37918241/article/details/97680207

版权

css 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

1.水平垂直居中

（1）.块级元素包含行列元素


    <style>
    .wp {
          width: 500px;
          height: 500px;
          background-color: blue;
          display: table-cell;
          text-align: center;
          vertical-align: middle;
        }
    </style>

  </head>
  <body>
    <div class="wp">
      <span>123123</div>
  </div>
  </body>

在这里插入图片描述
（ 2）块级元素包含块级元素

    .wp {
         width: 500px;
         height: 500px;
         background-color: blue;
         display: table-cell;
         text-align: center;
         vertical-align: middle;
       }
       .content{
           width: 200px;
         height: 200px;
         background-color: rgb(196, 13, 89); 
       }
   </style>

 </head>
 <body>
   <div class="wp">
     <div class="content">123123</div>
 </div>
 </body>

在这里插入图片描述

2.元素水平平均排列

1.虽然css3加入display：flex，但兼容性较差，所以在需要的情况下可以用table进行布局
（缺陷：无法换行）

<style>
    <style>
        .table {
            width: 1000px;
            display: table;
            border-spacing: 30px 0;
        }

        .tableCell {
            display: table-cell;
            height: 30px;
            line-height: 30px;
            text-align: center; 
            color: white;
            background: #6ee0b6;
        }

    </style>
</head>
<body>
<div class="table">
    <div class="tableCell">
        <span>1</span>
    </div>

    <div class="tableCell">
        <span>2</span>
    </div>

    <div class="tableCell">
        <span>3</span>
    </div>
</div>

在这里插入图片描述

3.自动占满剩余空间

<style>
    .table {
        display: table;
    }

    .demo2 {
        width: 400px;
        height: 300px;
    }

    .demo2 div.table-header-group {
        padding: 5px 20px;
        background: #10CFBD;
    }

    .demo2 .main {
        height: 100%;
        background: #48B0F7;
    }

    .demo2 div.table-footer-group {
        padding: 5px 20px;
        background: #10CFBD;
    }

    .table-row {
        display: table-row;
    }
</style>

</head>

<body>
    <h3>自动占满剩余空间</h3>
    <div class="table demo2">
        <div class="table-header-group">Table Header</div>
        <div class="main table-row">自动占满剩余空间</div>
        <div class="table-footer-group">Table Footer</div>
    </div>
</body>

在这里插入图片描述

HzDoctor

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
display: table-cell的一些用法

一个用的不多的css水平垂直居中方法 <style> .wp { width: 500px; height: 500px; background-color: blue; display: table-cell; text-align: center; ...
复制链接

扫一扫