我的div从边界半径出来

Question

这是我的问题：

我在<h1>内有一个<div>但是当我在border-radius中设置<div>时，<h1>已从div中删除，此处是我的代码：

<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之外：

视觉刚刚改变，而不是结构。

您可能希望将文字放在中心位置：

.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%);
}

jsFiddle

居中技巧：http://css-tricks.com/centering-percentage-widthheight-elements/

Answer 2

.test{
    overflow: hidden;
}

Answer 3

设置内部div的边距。像这样：

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

Answer 4

一种更简洁的方式来集中文本（如果这就是你所追求的）：

.test .text
{
    margin: 0; /* Only need this because h1 elements have default margin. */
    text-align: center;
    line-height: 300px;
}

jsFiddle（取自@nkmol作为基础）。