Question

我会尝试采取我以前见过的东西并用html / css重新创建它。这是我在Word中制作的一个模型。

我发现的几乎所有内容都是关于圈内的文字，而不是后面的重点，就像这张图纸一样。我希望圈子和文本尽可能居中。

以下是我最好的尝试：https://jsfiddle.net/FNdXz/559/

#container { height:400px; width:400px; background-color: #ccc; display: table-cell; } #inner { height:200px; width:200px; background:transparent; border-radius: 100px; -moz-border-radius: 100px; -webkit-border-radius: 100px; margin-left:25%; margin-top:25%; border: 1px solid white; } #test { color: black; text-align: center; vertical-align: middle; font-size: 50px; } #sub-test { color: blue; text-align: center; font-size: 30px; }

<div id="container"> <div id="test"> Hello World </div> <div id="sub-test"> Test, this is only a test </div> <div id="inner"> </div> </div>

显然，我可以稍后担心字体和着色 - 但我真的很挣扎于定位，可以使用专家的帮助。

Answer 1

<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
#container
{
  height:400px;
  width:400px;
  background-color: #ccc;
  display: table-cell;
}

#inner
{
  height:200px;
  width:200px;
  background:transparent;
  border-radius: 100px;
  -moz-border-radius: 100px;
  -webkit-border-radius: 100px;
  margin-left:25%;
  margin-top:10%;
  border: 1px solid white;
  position : relative;
}

#test {
  color: black;
  text-align: center;
  vertical-align: middle;
  font-size: 50px;
  position : absolute;
  margin-top : 100px;
  margin-left : 70px;

}

#sub-test {
  color: blue;
  text-align: center;
  font-size: 30px;
  position : absolute;
  margin-top : 160px;
  margin-left : 50px;
}
</style>
</head>
<body>
<div id="container">

    <div id="test">
      Hello World
    </div>
    <div id="sub-test">
      Test, this is only a test
    </div>
    <div id="inner">
    </div>
</div>
<body>
</html>

希望这是你要求的

Answer 2

使用svg创建一个圈子非常简单。您可以使用flexbox将所有内容集中在容器中。

然后使用svg和较低的position: absolute将z-index置于文本后面。

#container {
  height: 400px;
  width: 400px;
  background-color: #ccc;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

#container>div {
  z-index: 1;
}

#test {
  color: black;
  font-size: 50px;
}

#sub-test {
  color: blue;
  font-size: 30px;
}

svg {
  position: absolute;
  z-index: 0;
}

<div id="container">
  <div id="test">
    Hello World
  </div>
  <div id="sub-test">
    Test, this is only a test
  </div>
  <svg height="200" width="200">
  <circle cx="100" cy="100" r="100" stroke="white" stroke-width="1" fill="transparent"/>
</svg>
</div>

Answer 3

您需要使用position和z-index设置。将position设置为absolute后，您可以定义top，right，bottom和left两侧的边距。父容器。 z-index确定要显示的“图层” - 值越高，获得的优先级越高。查看更新的CSS here。

#container
{
  height:400px;
  width:400px;
  background-color: #ccc;
  display: table-cell;
  position: relative;
}

#inner
{
  height:200px;
  width:200px;
  position: absolute;
  top: -2%;
  left: -2%;
  z-index: 1;
  background:transparent;
  border-radius: 100px;
  -moz-border-radius: 100px;
  -webkit-border-radius: 100px;
  margin-left:25%;
  margin-top:25%;
  border: 1px solid white;
}

#test {
  position: absolute;
  color: black;
  text-align: center;
  vertical-align: middle;
  font-size: 50px;
  top: 30%;
  left: 15%;
  z-index: 2;
}

#sub-test {
  position: absolute;
  top: 45%;
  left: 15%;
  z-index: 2;
  color: blue;
  text-align: center;
  font-size: 30px;
}

Answer 4

另一个想法是简单地使用径向渐变：

#container {
  padding:50px 0;
  width: 400px;
  background:radial-gradient(circle at center,transparent 40%,#fff 40%,#fff calc(40% + 1px),transparent calc(40% + 1px)),
  #ccc;
  display: table-cell;
}

#test {
  color: black;
  text-align: center;
  vertical-align: middle;
  font-size: 50px;
}

#sub-test {
  color: blue;
  text-align: center;
  font-size: 30px;
}

<div id="container">
  <div id="test">
    Hello World
  </div>
  <div id="sub-test">
    Test, this is only a test
  </div>
</div>

在文本后面制作一个圆形边框 - 不在身边

4 个答案: