CSS Вертикальный текст центра в параграфе/div ...?

Question

У меня есть абзац <p class="timeNum">00:00</p> (только один элемент с текстом в нем), и я хочу переместить только текст в середине/сверху/снизу текстовой области (я не имею в виду вертикально в абзаце, но в своем собственном текстовая область (синяя область, когда мы помечаем текст мышью)). Когда я изменяю высоту строки равным размеру шрифта, это не помогает. Вертикальное выравнивание также не помогает. Текстовая область становится меньше, но текст остается внизу/базовой линией. Может ли кто-нибудь предложить решение. Благодаря!

HTML -><p class="timeNum">Text</p>

CSS ->

.timeNum { 
    font-size: 24px; 
    line-height: 24px; 
    text-align: right; 
    } 

text in a paragraph

Answer 1

Вы должны попробовать

display: table-cell; 
vertical-align: middle; 

Для еще больше информации, вы можете посмотреть на этот SO post

Answer 2

просто попробовать с этим

.border-box { 
 
    width:200px; 
 
    height:200px; 
 
    border:1px solid #ddd; 
 
    float:left; 
 
    text-align:center; 
 
    display:table; 
 
} 
 
.border-box p { 
 
    display:table-cell; 
 
    vertical-align:middle; 
 
}

<div class="border-box"> 
 
    <p>this is for your information</p> 
 
</div>

Answer 3

Если он имеет оболочку, вы можете попробовать это:

.wrapper { 
postion: relative 
} 
.textNum { 
position: absolute; 
top: 50%; 
left: 50%; 
transform: translate(-50%, -50%); 
} 

Это позиционирует все в середине своего родительского элемента. Теоретически это должно сработать. Это связано с тем, что верхнее и левое значения ориентируются на ширину родителя. Но значения перевода ориентируются на ширину самого элемента.