Hunter Turner Hunter Turner -4 years ago 87
CSS Question

Text with perfect border circle and dynamic width

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

enter image description here

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 Source

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>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download