Question

我正在尝试围绕一个圆圈绘制2个外圆并保持文本垂直居中。

我能够在圆圈外画一个圆圈而不是第三个圆圈。

HTML

<div id="content">
    <div id="outer-circle">
        <p>text</p>
    </div>
</div>

演示：http://jsfiddle.net/squidraj/7vusbo0v/1/

文字也没有水平居中。

非常感谢任何帮助。提前谢谢。

Answer 1

他们在一个圆圈中没有什么不同，所以请遵循正常的centering rules

具体细节取决于您需要支持的浏览器

Answer 2

帕特里克的参考是正确的。试试以下内容：

#outer-circle p { 
 text-align: center; 
 width: 100%;
 position: absolute; 
 top: 50%;
 transform: translateY(-50%);
 margin-top: -5px;
}

请注意，我添加了一个负上边距，用于说明边框宽度。

Answer 3

以下是我的解决方案，基于您的代码：

创建＆＃34;第3圈＆＃34;使用父#container
使用display:table-cell（允许您vertical align元素）将文本居中

＆＃13;

#content {
  border-radius: 50%;
  height: 320px;
  width: 320px;
  position: relative;
  box-shadow: 0 0px 0 10px green;
  margin: 10px;
}
#outer-circle {
  background: #385a94;
  border-radius: 50%;
  height: 300px;
  width: 300px;
  position: absolute;
  box-shadow: 0 0px 0 10px black;
  top: 10px;
  left: 10px;
  display: table;
}
#outer-circle p {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}

＆＃13;

<div id="content">
  <div id="outer-circle">
    <p>text</p>
  </div>
</div>

＆＃13;

当我接受并收到评论时，我正在编辑我的答案，但无论我给出的是当时正在输入的其他解决方案：

将border属性应用于#outer-circle会执行＆＃34;第3圈＆＃34;因为您正在使用box-shadow。
垂直对齐文本，与第一个解决方案相同。

＆＃13;

#outer-circle {
  background: #385a94;
  border-radius: 50%;
  height: 300px;
  width: 300px;
  position: absolute;
  box-shadow: 0 0px 0 10px green;
  top: 10px;
  left: 10px;
  display: table;
  border: 10px solid black;
  margin:10px;
}
#outer-circle p {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}

＆＃13;

<div id="content">
  <div id="outer-circle">
    <p>text</p>
  </div>
</div>

＆＃13;

Answer 4

设置你的css

    #outer-circle p {
  bottom: 0;
  left: 0;
  /* position: absolute; */
  right: 0;
  text-align: center;
  padding: 50% 0;
  top: 0;
}

请参阅https://jsfiddle.net/fwzfoncy/

圆圈内的圆圈和垂直居中的文字

4 个答案: