Question

我需要在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?没有回答此问题，因为解决方案基于“行高”，如我在问题中提到的那样，该行仍会在行下获取计数图形。

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

Answer 2

尝试一下：：

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

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

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

CSS-正确的文本垂直居中对齐

3 个答案: