центр выровнен специальный символ

Question

Здесь CSS и HTML код:

CSS:

. d { 
    display: table; 
    } 
.c { 
    font-size: 80px; 
    display: table-cell; 
    vertical-align: super; 
    text-align: center; 
    } 

HTML:

<div class="d"><p class="c">›</p> </div> 

заранее спасибо

Answer 1

попробовать этот CSS:

.d { 
    display: table; 
    vertical-align:middle; 
    } 

.c { 
    font-size: 80px; 
    } 

В вашем CSS упоминается опечатка («tabel» вместо «table»). Кроме того, между «.» Есть пробел (пробел). (dot) & «d» класс в первом стиле CSS

Answer 2

У меня только что был второй взгляд на этот вопрос, и я думаю, что использование CSS не может корректно отображать символ или давать желаемый результат, но хорошо подходит для текста. Вероятное ограничение браузера.

У меня есть 2 решения здесь:

1.

Заменить vertical-align: super; с vertical-align: middle; затем добавить положение: относительная; верх: -2px;

. d { 
display: table; 
} 
.c { 
font-size: 80px; 
border: 1px solid #666666; 
display: table-cell; 
vertical-align: middle; 
position:relative; top:-2px; 
} 

2.

Использование таблицы делает лучше и дает желаемый результат:

<table style="width: 100%;"> 
    <tr> 
    <td style="vertical-align: middle;border:1px solid #666666; font-size: 80px"> 
      > 
    </td> 
    </tr> 
</table 

Проверить jsbin из результатов.