CSS - 正确的文本垂直居中对齐[重复]

Posted 2023-03-05

【中文标题】CSS - 正确的文本垂直居中对齐[重复]

【英文标题】：CSS - correct text vertical center align [duplicate]

【发布时间】：2019-08-20 03:12:13

【问题描述】：

我需要在 div 的中心垂直对齐文本。我找到了很多方法，但它们都不尊重文本的确切内容——我说的是文本行下方的小图形部分——例如字母“ygq”等，例如大写字母使用“YGQ”，但在显示文本时仍然计入。我试过了：

.button 
    height: 20px;
    line-height: 20px;


<div class="button">My text</div> 
<div class="button">MY TEXT</div> 

反之

.button 
    height: 20px;
    display: flex;
    align-items: center;


<div class="button"><p>My text</p></div> 
<div class="button"><p>MY TEXT</p></div> 

我使用 padding 属性，当我确定时，不会显示线下的图形。有没有办法，如何根据文本的确切内容对齐文本？

问题How do I vertically center text with CSS? 没有回答这个问题，因为该解决方案基于“行高”，正如我在问题中提到的那样，它仍然在行下方计算图形。

【问题讨论】：

提到的“重复”问题并不能解决问题 - line-height 包括我在问题中提到的行下方的图形空间。

【参考方案1】：

要使元素垂直居中，您可以将display:flex 与父容器.button 一起使用，并将margin:auto 应用于子元素。

 

.button
    height: 150px;
    display: flex;
    background-color: aliceblue;
 
.button p 
   margin: auto;

    <div class="button">
        <p>My text</p>
    </div>

【参考方案2】：

试试这个::

.button
  display: flex;
  justify-content: center; /* align horizontal */
  align-items: center; /* align vertical */

<div class="button">
        <p>My text</p>
    </div>

【参考方案3】：

您可以使用位置和变换将一个项目垂直对齐另一个项目

.button 
    position: relative;


.button p 
    position: absolute;
    top: 50%;
    transform: translateY(-50%);

    /* For horizontal align */
    width: 100%;
    text-align: center;

    <div class="button">
        <p>My text</p>
    </div>