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 that you have read and understand our privacy policy and code of conduct.

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