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中垂直居中文本...？

回答

相关问题