enter image description here

How to make such a circle inside with such texts?
All that comes to mind in the div put 2 text and give it a border-radius : 50 % , here did

 * { margin: 0; padding: 0; box-sizing: border-box; } .oval{ background: red; display: inline-block; border-radius: 50%; height: 70px; width: 70px; text-align: center; padding: 3px; } 
 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="/css/style.css"> </head> <body> <div class="oval"> <h2>0,5</h2> <p>kg</p> </div> </body> </html>

  • Just as you wrote and need - AlTheOne
  • Do you think this is the right approach? - elik
  • one
    In fact, there are a lot of hikes, but let's go from the opposite ... Why is it considered “wrong”? And what you specifically "did not work"? - AlTheOne
  • could not split the screen so the sexes - elik
  • right now I 'll post a minute code - elik

2 answers 2

 .circus{ width: 100px; height: 100px; background-color: #1798D8; border-radius: 50px; color: #fff; display: flex; flex-direction: column; justify-content: center; align-items: center; font-family: arial; } .circus div:nth-child(1){ font-size: 44px; letter-spacing: 2px; } .circus div:nth-child(2){ font-size: 26px; letter-spacing: normal; } 
 <div class="circus"> <div>0,5</div> <div>кг</div> </div> 

      width: 10em; /* поддерживаются любые единицы, в том числе проценты */ margin: 1em auto; background: silver; border-radius: 50%;

    Duplicate