Идеальное центрирование содержимого элемента с рамкой и размером окна

Я настроил круглый div с кругом внутри, используя html-объект ⬤, div имеет ширину и высоту 20 пикселей, границу 2 пикселя и box-sizing: border-box, чтобы остановить увеличение размера.

Обычно, чтобы заполнить весь div кругом, я также устанавливаю font-size и line-height круга на 20 пикселей, но поскольку 4 пикселя div теперь заняты рамкой, я устанавливаю высоту строки на 16 пикселей. Это учитывало вертикальное центрирование, но горизонтальное центрирование по-прежнему отключено.

Как сделать его идеальным по центру?

https://jsfiddle.net/3drve2xn/

 div{
   border: 2px solid #C15649;
   line-height:16px;
   font-size:20px;
   width:20px;
   height:20px;
   position: absolute;
   top:0;
   margin:0;
   padding:0;
   left:0;
   z-index: 1;
   text-align: center;
   color:black;
   border-radius: 50%;
   content:"\002B24";
   cursor: pointer;
   box-sizing: border-box;
}

введите здесь описание изображения


html css centering border-box
person DasBeasto    schedule 07.10.2016    source источник
comment
Например: jsfiddle.net/3drve2xn/1?   -  person pol    schedule 07.10.2016
comment
Бордюр на все   -  person Daniel Springer    schedule 07.10.2016

Ответы (2)


arrow_upward
5
arrow_downward

выглядит ли результат, который вы ищете, так, попробуйте проверить эту скрипку и дайте мне знать, если вам все еще нужны дополнительные изменения.

 div {
   border: 2px solid #C15649;
   width:20px;
   height:20px;
   position: relative;
   top:0;
   margin:0;
   padding:0;
   left:0;
   z-index: 1;
   text-align: center;
   color:black;
   border-radius: 50%;
   cursor: pointer;
   box-sizing: border-box;
}
div:before{
 position: absolute;
 content:"";
 top:0;
 bottom:0;
 background:black;
 border-radius:50%;
 left:0;
 right:0;
 margin:auto;
 width:100%;
 height:100%;
}
<div>
</div>

person Rani Moreles Rubillos    schedule 07.10.2016

arrow_upward
2
arrow_downward

Я не думаю, что обводка вокруг символа возможна в CSS, потому что это сильно зависит от символа и шрифта.

Итак, вот ваши варианты AFAIK:

Вариант 1:

Это не очень хороший вариант — обернуть символ внутри другого элемента и поместить границу к внешнему элементу. Отрегулируйте границу для размера шрифта, который вы указали.

Вот пример:

div {
  border: 2px solid #C15649;
  position: absolute;
  top: 0;
  margin: 0;
  padding: 0;
  left: 0;
  z-index: 1;
  text-align: center;
  color: black;
  border-radius: 50%;
  box-sizing: border-box;
}
div span {
  line-height: 46px;
  font-size: 50px;
  width: 50px;
  height: 50px;
  content: "\002B24";
  cursor: pointer;
  display: block;
  position: relative;
  left: -3px;
  top: -2px;
  box-sizing: border-box;
}
<div>
  <span>&#11044;</span>
</div>

Вариант 2:

Если вам нужна рамка для персонажа, вы можете использовать text-shadow:

(обратите внимание, что text-shadow поддерживается только в IE 10+)

div {
  /*border: 2px solid #C15649;*/
  text-shadow: -2px 0 red, 0 2px red, 2px 0 red, 0 -2px red;
  font-size: 50px;
  color: black;
  content: "\002B24";
}
<div>&#11044;</div>

person kukkuz    schedule 07.10.2016
comment
Извините, я не указал предполагаемый результат. Это не означает, что объект точно обведен границей, он должен выглядеть как переключатель. Так что, в конце концов, внутренний круг будет меньше, я просто сделал его одинакового размера, чтобы было легко увидеть несоответствия центрирования. Это полезный ответ, который, как я думал, даст мне выбор. - person DasBeasto; 07.10.2016
comment
Что ж, в этом случае вам придется отказаться от идеи использования ⬤ и принять ответ @RaniMorelesRubillos :) - person kukkuz; 07.10.2016