Question

请你看一下this CSS DEMO，让我知道如何将内部div放在out div中心并将内部div的文本居中？

.outer{
    width: 100px;
    height: 100px;
    background: #fc2e5a;
    -moz-border-radius: 50px;
    -webkit-border-radius: 50px;
    border-radius: 50px;
}
.inner {
    width: 80px;
    height: 80px;
    background: #fff;
    -moz-border-radius: 50px;
    -webkit-border-radius: 50px;
    border-radius: 50px;
}

<div class="outer">
    <div class="inner">Test</div>
</div>

Answer 1

如果您知道div的确切大小，请不要使用table-cell或flex-box或position，那么您可以执行以下操作：

.outer{
  width: 100px;
  height: 100px;
  padding: 10px;
  border-radius: 50%;
  background: #fc2e5a;
  -moz-box-sizing: border-box;    
       box-sizing: border-box;
}

.inner {
  width: 80px;
  height: 80px;
  line-height: 80px;
  border-radius: 50%;
  text-align: center;
  background: #fff;
}

以下是demo

请注意，我删除了border-radius的浏览器特定前缀，并将其设置为50%，使其与整个大小无关。

Answer 2

http://jsfiddle.net/2Wkqn/5/

添加行

position: relative;
top: 10px;
left: 10px;

到你的.inner CSS

在段落标签中包含文本“Test”，然后在CSS中添加“.inner p”类并输入以下行：

padding-top: 30px;
text-align: center;

在CSS3中居中圆形Div

2 个答案: