HTML CSS

RESPONSIVE CIRCLE WITH TEXT

(quick & simple example)

<div class="circle">    <div class="txt">TEXT</div> </div>

RESPONSIVE CIRCLE HTML

01

PERCENTAGE WIDTH + BORDER RADIUS .circle {   width: 20%; border-radius: 50%;   background: red; }

RESPONSIVE CIRCLE CSS

02

MATCH HEIGHT TO WIDTH .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

NECESSARY TO POSITION TEXT .circle {   position: relative;   line-height: 0; }