HTML CSS
RESPONSIVE CIRCLE WITH TEXT IN HTML CSS
<div class="res-circle"> <div class="circle-txt">Foo!</div> </div>
RESPONSIVE CIRCLE HTML
01
.res-circle { PERCENTAGE WIDTH width: 20%; TURN INTO CIRCLE border-radius: 50%; BACKGROUND COLOR background: #bcd6ff; NECESSARY TO POSITION TEXT line-height: 0; position: relative; }
RESPONSIVE CIRCLE CSS
02
MATCH HEIGHT TO WIDTH .res-circle::after { content: ""; display: block; padding-bottom: 100%; }
CENTER TEXT IN CIRCLE .circle-txt { position: absolute; bottom: 50%; width: 100%; text-align: center; }
CENTER TEXT CSS
03