我的组员已经离开边界了

Question

这就是我的问题：

我有一个

<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/




Answer 1

设置内部div的边距。如下所示：

margin-top:50px;
margin-left:50px;

Answer 2

.test{
    overflow: hidden;
}

Answer 3

您的文本实际上不在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/