Text with perfect border circle and dynamic width

Question

I have three circles that are lined up and using a percentage.

I am trying to have the border surrounding them stay a complete circle no matter what the width is.

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>

I've tried using things like line-height and height, but neither of those are responsive to with width.

Here's a Fiddle so you can play with the responsiveness easily:

JSFiddle

Answer 1

If you put the text in an element, you can absolutely position it in the center and use a pseudo element of the parent to apply vertical padding of 100%, which will match the width, making a square.

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>