提问者:小点点

我的组员已经离开边界了


这就是我的问题:

我有一个

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


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

匿名用户

.test{
    overflow: hidden;
}

匿名用户

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

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