0

Нужно выровнять по вертикали симметричный символ к примеру "*" в блоке #big заданной ширины и высоты в x px:

<div id="big">
 <div id="small">*</div>
</div>

Пробовал 2 техники:

1) 
#big{
   line-height: x px;
   height: x px;
   ...
}   

#small{
    white-space: nowrap;
    overflow: hidden;
    ...
}


2)
#big{
    display: table;
    ...
} 
#small{
    vertical-align: middle;
    display: table-cell;
    ...
}

В мобильном chrome и edge все ок, safari для ios - нет. Символ всегда чуть ниже центра(но это заметно).

В чем может быть причина? Какие еще техники можно использовать, но так что бы решение было кросс-браузерным?

11
  • 1
    Символ "*" лично у меня нифига не симметричен и торчит заметно выше других символов и по центру в принципе не выровнится, это во-первых
    – andreymal
    1 мар 2019 в 15:33
  • Во-вторых, ru.stackoverflow.com/questions/758915
    – andreymal
    1 мар 2019 в 15:34
  • andreymal, "если поставить шрифт, в котором высота всех букв будет одинакова" - какой шрифт лучше взять(который вероятно есть во всех браузерах)? 1 мар 2019 в 15:45
  • Если у вас задача запихнуть звёздочку точно по центру — просто сделайте картинку, проще будет
    – andreymal
    1 мар 2019 в 15:47
  • andreymal, в общем - да, но мне нужно прям сейчас, а картинки долго делать, есть много модификаций стилей блоков. Поменять шрифт, если такой есть - быстро. 1 мар 2019 в 15:51

1 ответ 1

0
    #big {
        width: 200px;
        height: 200px;
        background-color: yellow;
        display: flex;
        justify-content: center;
        align-items: center;
    }

#small {
    margin-bottom: -10px;
}

или пришли ссылку на html с css. для конкретики.

Ваш ответ

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

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