Question

我需要构建一个圆形（在css中），它有2行文本，可以根据所选的翻译长度改变并始终居中。

到目前为止，我有这个：

h3 {
  background-color: #fcd141;
  border-radius: 50%;
  padding: 12px 5px 5px 5px;
  margin-top: 30px;
  width: 20%;
  height: 20%;
}

<h3>
  <span style="vertical-align: middle;">98%</span>
  <span style="margin-top: -4px; display: block;">Ratingfasdasfasfsad</span>
</h3>

圈子需要动态响应文本的长度，保持宽高比不变。

Answer 1

您可以查看代码中的代码，它看起来像我的椭圆

＆＃13;

.circle-text {
  width: 50%;
  padding 10px;
}
.circle-text:after {
  content: "";
  display: block;
  width: 100%;
  height: 0;
  padding-bottom: 100%;
  background: #4679BD;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%;
}
.circle-text div {
  float: left;
  width: 100%;
  padding-top: 50%;
  line-height: 1em;
  margin-top: -0.5em;
  text-align: center;
  color: white;
}

＆＃13;

<div class="circle-text">
  <div>I'm asddddddssssssssssssssssssasdasdashd asfafjsldfashdfisdpf sdjf pe!</div>
</div>

＆＃13;

Answer 2

您可以使用vw（视图宽度单位）：

注意

变换仅用于垂直对齐。

h3 { background-color: #fcd141; border-radius: 50%; padding: 20px; margin-top: 30px; width: 20vw; height: 20vw; text-align: center; word-wrap: break-word; position: relative; } h3 span { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); transform: translate(-50%, -50%); }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <h3> <span> 98% <br /> Ratingfasdasfasfsad</span> </h3>

我还能够移除您的内联样式，并将您的两个跨度合并为一个。

CSS圈内有动态文字

2 个答案: