zoukankan      html  css  js  c++  java
  • table-cell设置宽高、居中

    • table-cell默认宽高由内容决定
        <style type="text/css" rel="stylesheet">
            .content {
                color: white;
            }
            
            .cell {
                background-color: blue;
                display: table-cell;
            }
        </style>
    
        <div class="content">
            <div class="cell">
                test
            </div>
        </div>
    
    
    • 可以设置固定宽高:
     .cell {
                background-color: blue;
                display: table-cell;
                 100px;
                height: 100px;
            }
    
    • 直接设置宽高百分比是无效的,因为table没有显式声明,默认加的table宽高也是由内容决定,所有要使用百分比,必须显式声明table并定义宽高(row默认充满table)
    <!DOCTYPE html>
    <html>
    
    <head lang="en">
        <meta charset="UTF-8">
        <title>cell</title>
    </head>
    
    <body>
    
        <style type="text/css" rel="stylesheet">
            .content {
                color: white;
            }
            
            .table {
                display: table;
                 100%;
                height: 200px;
            }
            
            .cell {
                background-color: blue;
                display: table-cell;
                 100%;
                height: 100%;
            }
        </style>
        <div class="content">
            <div class="table">
                <div class="cell">
                    test
                </div>
            </div>
    
        </div>
    </body>
    
    </html>
    
    • cell里的内容水平居中
    .cell {
                background-color: blue;
                display: table-cell;
                 100%;
                height: 100%;
                text-align: center;
            }
    
    • cell里的内容垂直居中:
     .cell {
                background-color: blue;
                display: table-cell;
                 100%;
                height: 100%;
                text-align: center;
                vertical-align: middle;
            }
    

    注意:设置 line-height: 100%;无效,无法让文字垂直居中,设置 line-height: 200px;也可以垂直居中

  • 相关阅读:
    Python学习第75天(js历史和引入,模块复习)
    Python学习第74天(抽屉习题笔记)
    Python学习第73天(shelve模块、习题练习)
    Js查漏补缺02-各种数据类型
    Js查漏补缺01-js学习笔记
    开篇
    小小python欢乐多
    阅读笔记09 个人对于三年来软件工程的一点心得
    14周周博客
    软件杯第二阶段
  • 原文地址:https://www.cnblogs.com/cowboybusy/p/11459408.html
Copyright © 2011-2022 走看看