Добавить небольшой блок в круг

#html #css

Здравствуйте. Появилась проблема - нужно сделать блок такого вида:



Не знаю, как верно сделать блок с единичкой.
Попробовал спозиционировать float: left; и поровнять margin'ами, но мне кажется,
что это не самый лучший вариант, плюс не срабатывает margin-left.

Буду рад помощи.



.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;
}
 
  
1





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

Ответы

Ответ 1

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%); /* и подвинуть ещё на половину мелкого круга */
}



Ответ 2

Используйте для этого абсолютное позиционирования для блока с единицей. В отличие
от вашего варианта с float и margin, вариант с position:absolute выводит "единицу"
из общего потока, и таким образом она в дальнейшем не будет "мешать", сли вам потребуется,
напривер, добавить в большой круг новые элементы.



.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%);
}

  
1



Ответ 3

.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;
}

  
1



Ответ 4

Совсем как на картинке:


.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%);
}

  
1