Hello. There was a problem - you need to make a block of this type:

Sample block from the layout

I do not know how to correctly make a block with one. I tried to position float: left; and equalize the margines, but it seems to me that this is not the best option, plus the margin-left does not work.

I would be happy to help.

 .top { width: 180px; height: 180px; background-color: #000; border-radius: 110px; border: 6px solid #f7d701; } .circle { height: 50px; width: 50px; background-color: #f7d701; border-radius: 110px; color: #000; text-align: center; line-height: 50px; float: right; margin-top: 67px; font-size: 19px; } 
 <div class="top"> <div class="circle">1</div> </div>

https://codepen.io/anon/pen/brpZBM

  • If the answer helped solve your problem, you can mark it as accepted by clicking on the check mark next to it. - Cheg
  • @Cheg, there are many answers, and alas, I cannot decide which is the best. Therefore, I urge an expert / moderator to help with deciding the best answer. - Felix

4 answers 4

 div { width: 10em; border-radius: 50%; background: black; border: 6px solid red; text-align: right; } div:before { /* для вертикального центрирования */ content: ""; display: inline-block; vertical-align: middle; padding-top: 100%; /* высота равна ширине */ } div:after { content: "1"; display: inline-block; vertical-align: middle; color: white; background: blue; line-height: 3em; width: 3em; text-align: center; border-radius: 50%; /* ПЕРЕДУМАЛ: margin-right: -3px; /* половина от border-width родителя */ transform: translateX(50%); /* и подвинуть ещё на половину мелкого круга */ } 
 <div></div>

  • Your answer at least somehow differs from the other two :) +1 - Yuri
  • Because it is normal)) why produce extra nesting and extra elements - DaemonHK

Use absolute positioning for the unit with the unit. Unlike your variant with float and margin , the variant with position:absolute displays the "unit" from the general flow, and thus it will not "interfere" in the future if you need, for example, to add new elements to the large circle.

 .top { width: 180px; height: 180px; background-color: #000; border-radius: 110px; border: 6px solid #f7d701; position: relative; } .circle { height: 50px; width: 50px; background-color: #f7d701; border-radius: 110px; color: #000; text-align: center; line-height: 50px; font-size: 19px; position: absolute; right: 0; top: 50%; transform: translate(50%, -50%); } 
 <div class="top"> <div class="circle">1</div> </div> 

     .top { width: 180px; height: 180px; background-color: #000; border-radius: 110px; border: 6px solid #f7d701; } .circle { height: 50px; width: 50px; background-color: #f7d701; border-radius: 110px; color: #000; text-align: center; line-height: 50px; float: right; margin-top: 67px; font-size: 19px; position: relative; right: -25px; } 
     <div class="top"> <div class="circle">1</div> </div>

      Just like in the picture:

       .top { width: 180px; height: 180px; background-color: #000; border-radius: 110px; border: 6px solid #f7d701; position: relative; } body { background: black; } .circle { height: 50px; width: 50px; background-color: #f7d701; border-radius: 110px; color: #000; text-align: center; line-height: 50px; font-size: 19px; position: absolute; right: 0; top: 50%; font-size: 175%; transform: translate(50%, -50%); } 
       <div class="top"> <div class="circle"><b>1</b></div> </div>