码迷,mamicode.com
首页 > 其他好文 > 详细

如何让高度自适应的div中的文字水平垂直居中

时间:2018-01-26 18:56:29      阅读:218      评论:0      收藏:0      [点我收藏+]

标签:设置   最大值   适应   pos   span   一个   overflow   解决办法   中间   

1.在做数据展示的时候,因为后台没有数据,为了提示用户没有数据,自己手写了一个div中间显示一个“暂无数据的字样”,

然后控制显示和隐藏,这样方法有两种:

第一种:设置display隐藏,但有一个问题,因为我的div中用了display:table-cell,所以起了冲突,

第二种:更改z-index的值 不显示的时候设置0,显示的时候设置最大值就行(推荐使用)

 

本文主要是探讨,因为外层的div的宽度和高度是不固定,导致了文字不能水平垂直居中的问题,解决办法:

        #big{
            width:100%;
            height:100%;
            font-size:32px;
            font-weight:bold;
            position:absolute;
            background-color:pink;
            overflow:hidden;
        }
        #big>p{
            position:absolute;
            width:130px;/**依据字体的宽度而定**/
            height:45px;/**依据字体的大小而定**/
            top:0;
            left:0;
            right:0;
            bottom:0;
            margin:auto;
        }


    <div id="big">
        <p>暂无数据</p>
    </div>

 

如何让高度自适应的div中的文字水平垂直居中

标签:设置   最大值   适应   pos   span   一个   overflow   解决办法   中间   

原文地址:https://www.cnblogs.com/pengfei25/p/8360603.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!