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;也可以垂直居中

  • 相关阅读:
    获取SpringMVC的映射路径
    Spring任务调度之Quartz集成
    Spring任务调度之SpringTask基于XML和基于注解的使用示例
    Redis分布式集群搭建
    京东软开实习岗
    C语言编程练习(一)
    servlet温习
    tomcat启动超过时间
    JDK版本更换,Eclipse中所有的项目报错
    Myeclipse2017C版本破解
  • 原文地址:https://www.cnblogs.com/cowboybusy/p/11459408.html
Copyright © 2011-2022 走看看