Div高度未调整以适合内容 [英] Div height doesn't adjust to fit content

问题描述

如何将div水平和垂直居中，并调整高度以适合内容？

How can I center a div horizontally and vertically and adjust height to fit content?

fiddle

这是我的html代码：

Here is my html code:

 <div class="sprite">
  </div>

 <div class="content">
     <span>close</span>
     <div class="centered">

         lorem lipsum.....

     </div>

 </div>

并且css：

.sprite{
    position: fixed;
    left: 0px;
    top: 0px;
    z-index: 20;
    width: 100%;
    height: 100%;
    background-color: gray;
    opacity: 0.6;
}

.content{
     border:1px solid red; 
     z-index:21; 
     position: absolute; 
     margin:auto; 
     padding:10px;
     left: 0px;
     top: 0px; 
     bottom:0px; 
     right:0px;
     height:30%; 
     width:30%;  
     text-align:center; 
}
.content span{
     position:absolute; 
     top:0px; 
     right:0px;}

.centered{
     height:100%; 
/* Internet Explorer 10 */
     display:-ms-flexbox;
     -ms-flex-pack:center;
     -ms-flex-align:center;

/* Firefox */
    display:-moz-box;
    -moz-box-pack:center;
    -moz-box-align:center;

/* Safari, Opera, and Chrome */
    display:-webkit-box;
    -webkit-box-pack:center;
    -webkit-box-align:center;

/* W3C */
   display:box;
   box-pack:center;
   box-align:center;
}

这是我想要的：

推荐答案

编辑.content类具有以下css和删除位置绝对

Edit .content class to have following css and remove position absolute

height:auto;
overflow:visible;

这篇关于Div高度未调整以适合内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！