我的 div 不在边界半径范围内答案

【问题标题】：my div is out from border-radius我的 div 不在边界半径范围内
【发布时间】：2014-01-23 17:12:53
【问题描述】：

这是我的问题：

我在<div> 中有一个<h1>，但是当我在<div> 中设置一个border-radius 时，<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/

【问题讨论】：

请告诉我们您期望的结果...
margin: auto 仅适用于高度/宽度不是 auto 的元素。

标签： html css

【解决方案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/

【讨论】：

【解决方案2】：

使文本居中的更简洁的方法（如果您要这样做的话）：

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

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

【讨论】：

【解决方案3】：

.test{
    overflow: hidden;
}

【讨论】：

感谢它与此一起使用，非常感谢：D
@user3164971 认真的吗？你接受了这个？删除我的答案，你问别的东西，你想要别的东西
添加一些解释。

【解决方案4】：

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

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

【讨论】：