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

Question

我有三个圆圈排列并使用百分比。

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

CSS 和 HTML：

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;
  }
}

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

我试过使用line-heightand 之类的东西height，但它们都没有响应宽度。

这是一个 Fiddle，因此您可以轻松玩转响应性：

JSFiddle

Answer 1

如果你把文本放在一个元素中，你可以绝对将它放在中心并使用父元素的伪元素应用垂直padding的100%，这将匹配宽度，形成一个正方形。

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;
  }
}

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