css трюк для центрирования по горизонтали и по вертикали

Question

Мой класс .cent для <li> элементов. Я хочу сосредоточить текст <li> как по горизонтали, так и по вертикали. text-align:center; заботится о горизонтальном центрировании, но вертикальное центрирование не работает. Что такое трюк CSS для этого?

.cent{ 
    height:20px; 
    width:20px; 
    text-align:center; 
    vertical-align: middle; 
} 

Answer 1

line-height Недвижимость.

Установите его равным высоте элемента, а текст будет вертикально центрирован.

.cent{ 
    height: 20px; 
    width: 20px; 
    text-align: center; 
    /*vertical-align: middle;*/ 
    line-height: 20px; 
} 

Answer 2

Что является его родителем?

.parent { 
    position: relative; 
} 

.cent { 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    margin-left: -10px; 
    margin-top: -10px; 
} 

Или, если вы хотите vertical-align: middle работать, установите display: table-cell.

Answer 3

Попробуйте установить стиль для литий тегов, поля и отступы тегов поможет вам

Мол,

# set default 
li 
    { 
    margin: 0; 
    padding: 0; 
    } 

после написания стиль для вашего класса процента, это будет влиять тег li правильно.