0

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

DIV.type_text
{
    position: absolute;
    cursor: pointer;
    width: 20px;
    height: 20px;
    text-align: center;
}
DIV.type_text SPAN
{
    position: absolute;
    font-size: 15px;
    color: #000000;
    font-weight: bolder;
    bottom: 25%;
    display: block;
    width: 100%;
    text-align: center;
    line-height: 9px;
    background-color: #FB3939;
}

Как вы видите, буква Д выходит за пределы дива.

Можно ли сделать так, чтобы в такой ситуации половина буквы Р выходило за пределы (слева) и половина буквы Д (справа) выходило за пределы. (т.е. было строго по центру).

Может не совсем удачно описал, но думаю вы меня поймете.

2
  • 1
    Как выглядит HTML? <div class="type_text"><span>РЯ</span>Д</div>? 30 июл 2015 в 3:28
  • @PeterOlson именно
    – Manitikyl
    30 июл 2015 в 4:39

3 ответа 3

1

Можно воспользоваться transform translate

div.type_text
{
    position: absolute;
    cursor: pointer;
    width: 20px;
    height: 20px;
    background-color: #FB3939;
}
div.type_text span
{
    font-size: 15px;
    color: #000000;
    font-weight: bolder;
    display: inline-block;
    text-align: center;
    line-height: 9px;
    transform: translateX(-25%);
}
<div class="type_text"><span>РЯД</span></div>

3
  • У меня не очень-то по центру выглядит. joxi.ru/82Q4D1Zsj3a98m
    – wokalek
    30 мар 2017 в 18:44
  • @VostokSisters, ты учитывай шрифт и размеры каждой буквы. Чтобы было полностью по центру, в шрифте у букв не должны быть пустые места
    – Yuri
    30 мар 2017 в 19:29
  • 2
    Вот ты и учитывай, я-то чего (:
    – wokalek
    30 мар 2017 в 19:48
1

div.type_text{
  width: 100px;
  height:20px;
  font-size:14px;
  line-height:22px;
  text-align:center;
  font-weight:600;
  display:inline-block;
  position:relative;
}
div.type_text span{
  display:inline-block;
  position:relative;
  z-index:2;
}
div.type_text::after{
  content:"";
  width:18px;
  height:100%;
  background:red;
  margin:0 auto;
  position:absolute;
  top:0;
  left:0;
  right:0;
  z-index:-1;
}
<div class="type_text"><span>РЯ</span>Д</div>

Ииии да, от шрифта тут овердофига зависит((

0

Добавьте к вашим классам такие свойства:

.type_text {
    position: relative;
    left: 50%;
    float: left;
}

.type_text span {
    position: relative;
    right: 50%;
}

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.