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;
            width: 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是使用在子元素上。

 

 

 

<!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 {    
                width: 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> 

 

关键词:gt lt table display 文本 div px html nbsp 随便

相关推荐:

Restrict height of div marked with display:table-cell?

CSS header with Table cell

div 100% in table-cell

Make browser to wrap table-cell

Issue with Absolutely Positioned Element and CSS Transitions

HTML5 & MUI 界面样式

前端基础面试题@CSS篇

关于图片垂直居中的方法

CSS table cell overflow is ignored by FF & Opera

display:table和display:table-cell的妙用