[英]Div height doesn't adjust to fit content
How can I center a div horizontally and vertically and adjust height to fit content? 如何将div水平和垂直居中并调整高度以适应内容?
Here is my html code: 这是我的HTML代码:
<div class="sprite">
</div>
<div class="content">
<span>close</span>
<div class="centered">
lorem lipsum.....
</div>
</div>
And css: 和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;
}
This is what I want: 这就是我要的:
Edit .content class to have following css and remove position absolute 编辑.content类以使用以下css并删除绝对位置
height:auto;
overflow:visible;
In your .content
class, remove 在.content
类中,删除
position: absolute;
and add 并添加
margin-top:24%;
to align it in vertically middle while taking the height of the content 在获取内容的高度时,将其在垂直中间对齐
absolute
positioned attrib are rather difficult to style! absolute
定位属于相当难以风格!
Fiddle : http://jsfiddle.net/logintomyk/Xxfhn/ 小提琴 : http : //jsfiddle.net/logintomyk/Xxfhn/
EDIT 编辑
Here you go mate 在这里你去交配
CSS to ammend : CSS修改:
.sprite{
position: fixed;
left: 0px;
top: 0px;
z-index: 20;
width: 100%;
/* height: 100%; */
background-color: gray;
opacity: 0.6;
border:1px solid #FFF;
text-align:center;
}
.content{
border:1px solid red;
position:relative;
z-index: 21; /* change this to less than 20 to overlay under sprite on scroll*/
margin:auto;
padding:10px;
width:30%;
margin-top:24%;
text-align:center;
}
.content span{position:absolute;right:0;top:0;text-align:right; border:1px solid #F00000}
Fiddle : http://jsfiddle.net/logintomyk/Xxfhn/2/ 小提琴 : http : //jsfiddle.net/logintomyk/Xxfhn/2/
Trick was to align a absolute
<span>
in relative
content
class.... 诀窍是在relative
content
类中对齐absolute
<span>
....
replace your css
with mine... 用我的替换你的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;
width:30%;
text-align:center;
}
.content span{position:absolute; top:0px; right:0px;}
.centered{
/* 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{
border:1px solid red;
position:relative;
margin:auto;
padding:10px;
width:30%;
margin-top:4%;
text-align:center;
}
.content span{position:absolute;right:0;top:0;text-align:right;}
.sprite{
position: fixed;
left: 0px;
top: 0px;
width: 100%;
background-color: gray;
opacity: 0.6;
border:1px solid #FFF;
text-align:center;
}
does that help 这有帮助
You are making this hard on yourself, just change the Position to be Relative in the class content, see below; 你正在努力做到这一点,只需在课程内容中将职位改为亲戚,见下文;
.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;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.