具有完美边框圆和动态宽度的文本

Question

我有三个排成一行并使用百分比的圈子。

我试图让它们周围的边框保持完整的圆圈，无论宽度是多少。

CSS＆amp; HTML：

＆＃13;

＆＃13;

html, body {
  padding: 0;
  margin: 0;
}
.container {
  width: 100%;
  max-width: 700px;
  margin-top: 50px;
}
.container div {
  font-family: Helvetica;
  width: calc(33.333% - 26px);
  margin: 0 10px;
  display: inline-block;
  float: left;
  text-align: center;
  border: 1px dashed #aaa;
  border-radius: 100%;
  line-height: 210px;
  font-size: 7vw;
}

@media (min-width: 700px) {
  .container div {
    font-size: 50px;
  }
}

＆＃13;

<div class="container">
  <div>8:00</div>
  <div>9:30</div>
  <div>11:00</div>
</div>

＆＃13;

＆＃13;

＆＃13;

我已尝试使用line-height和height之类的内容，但这些内容都没有响应宽度。

这里是一个小提琴，所以你可以轻松地玩响应：

JSFiddle

Answer 1

如果将文本放在元素中，则可以将其放在中心，并使用父元素的伪元素应用padding的垂直100%，这将与宽度匹配，一个广场。

＆＃13;

＆＃13;

html,
body {
  padding: 0;
  margin: 0;
}

.container {
  width: 100%;
  max-width: 700px;
  margin-top: 50px;
}

.container div {
  width: calc(33.333% - 26px);
  margin: 0 10px;
  font-family: Helvetica;
  float: left;
  border: 1px dashed #aaa;
  border-radius: 100%;
  position: relative;
}

.container > div:after {
  content: '';
  display: block;
  height: 0;
  padding-bottom: 100%;
}

.container > div > span {
  text-align: center;
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  font-size: 7vw;
}

@media (min-width: 700px) {
  .container div {
    font-size: 50px;
  }
}

＆＃13;

<div class="container">
  <div>
    <span>8:00</span>
  </div>
  <div>
    <span>8:00</span>
  </div>
  <div>
    <span>8:00</span>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;