zoukankan      html  css  js  c++  java
  • display:table / display:table-cell 用法

    display:table  元素会作为块级表格来显示(类似table);表格前后带有换行符;

    display:table-cell 元素会作为表格单元格来显示(类似<td> 和 <th>)

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style>
    
            .wrap {
                display:table;
                 600px;
                height: 300px;
                background-color: pink;
                margin:300px auto;
            }
            .box {
                display:table-cell;
                /*height:300px;  这个可以没有*/
                text-align:center;
                vertical-align:middle;
            }
    
    
        </style>
    </head>
    <body>
        <div class="wrap">
            <div class="box">
                投资发展有限公司
            </div>
        </div>
    </body>
    </html>

    display:table一般是使用在父元素上,display:table-cell 是使用在子元素上。

    <!DOCTYPE html>    
    <html>    
        <head>    
            <meta charset="utf-8" />    
            <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />    
            <title>demo</title>    
            <style type="text/css">    
                .box {    
                     500px;    
                    height: 300px;    
                    border: 1px solid #FFF;    
                    background-color: #999;    
                    display: table;    
                }    
                .wrap{    
                    display: table-cell;    
                    vertical-align: middle;     
               
                }          
                    
            </style>    
        </head>    
        <body>    
        
            <div class="box">    
                <div class="wrap">  
                    我是文字随便几行我是文字随便几行我是文字随便几行我是文字随便几行我是文字随便几行我是文字随便几行固定宽度的文字自动换行并垂直剧中固定宽度的文字自动换行并垂直剧中   
                </div>    
            </div>      
        </body>    
    </html> 

  • 相关阅读:
    整数数组中最大子数组的和有溢出如何处理
    返回一个整数数组(环形数组)中最大子数组的和
    cnblogs用户体验评价
    SCRUM报告(一)
    Spring冲刺计划会议
    Spring冲刺计划会议
    团队合作项目----冲刺目标确定
    结队开发
    组队开发----卖书问题
    团队开发---NABC分析
  • 原文地址:https://www.cnblogs.com/agansj/p/8243636.html
Copyright © 2011-2022 走看看