【问题标题】: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;
      

      【讨论】:

        猜你喜欢
        • 2010-11-19
        • 1970-01-01
        • 1970-01-01
        • 2021-04-28
        • 2012-11-13
        • 1970-01-01
        • 2021-06-28
        • 1970-01-01
        • 1970-01-01
        相关资源
        最近更新 更多