这就是我的问题:
我有一个
<div class="test"><h1 class="text">test</h1></div>
.test{
background: red;
height: 300px;
width: 300px;
border-radius: 150px;
display: inline-block;
position: relative;
}
.test .text{
display: inline-block;
background: green;
margin: auto;
position: relative;
}
这是现场直播
http://jsfiddle.net/n3aru/
您的文本实际上不在div之外:
视觉只是改变了,而不是结构。
您可能需要将文本定位到中心:
.test{
background: red;
height: 300px;
width: 300px;
border-radius: 150px;
display: inline-block;
position: relative;
text-align: center;
}
.test .text{
display: inline-block;
background: green;
margin: auto;
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
定心技巧:http://css-tricks.com/centering-percentage-widthheight-elements/
.test{
overflow: hidden;
}
设置内部div的边距。如下所示:
margin-top:50px;
margin-left:50px;