CSS在段落/ div中垂直居中文本...？

我有一個段落<p class="timeNum">00:00</p>（只有一個元素，裏面有文字），我只想移動文本區域的中間/頂部/底部的文本（我不是指在段落中垂直，而是在它自己的文本區域（用鼠標標記文本時的藍色區域））。當我將行高改爲等於字體大小時，它無濟於事。垂直對齊也沒有幫助。文本區域變小，但文本保持在底部/基線。任何人都可以提出解決方案謝謝！CSS在段落/ div中垂直居中文本...？

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

CSS - >

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

text in a paragraph

來源

2016-08-14 ikken32

請提供您的代碼。 – Aziz

你正在談論的事情（「藍色區域」）意味着你正在使用服務或應用程序來編輯html。您使用的是什麼服務或應用程序？ – Ouroborus

不，我沒有使用任何東西，我只是在用鼠標標記文本時對區域進行了修補。 – ikken32

你應該嘗試

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

對於更多的信息，你可以看看這個SO post

來源

2016-08-14 11:22:59 dtlvd

只是這個

.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>

來源

2016-08-14 15:34:21

嘗試，如果它有一個包裝，你可以試試這個：

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

這在它的父元素的中等倉位的一切。理論上它應該起作用。這是因爲頂部和左側的值以父級的寬度定位。但是翻譯價值取向在元素本身的寬度上。

來源

2017-08-29 14:09:58 codehs97

CSS在段落/ div中垂直居中文本...？

回答

相關問題