如何在选择框内垂直对齐文本？ （不是在谈论选择框或 div 框）

Posted 2023-03-06

【中文标题】如何在选择框内垂直对齐文本？ （不是在谈论选择框或 div 框）

【英文标题】：how to align the text vertically inside of the selection box? (not talking about select box or div box)

【发布时间】：2019-10-24 14:32:11

【问题描述】：

当我给文本div（span、p等）加上line-height并在浏览器中拖动它时，选择框有一个丑陋的空白区域，如下所示：

我想抬起选择框内的文本本身，以便在用户拖动它时看起来更好。我在 Google 上搜索过这个主题，但找不到任何线索。

有没有办法解决这个问题？

代码：

      * 
        margin: 0 auto;
        padding: 0;
      
      div, section 
        position: relative;
      
     .text 
       width: 400px;
       height: 600px;
       font-family: Helvetica;
       line-height: 2rem;
       /* giving flex doesn't work to the text itself. */
       display: flex;
       flex-flow: row;
       justify-content: center;
       align-items: center;
       /* again, align-self or content doesn't affected to the text. */
       align-self: center;
       align-content: center;

       border: 1px solid black;
     
     p 
       display: inline-flex;
       vertical-align: center; /* vertical align doesn't work to the text */
       align-self: center;
       align-content: center;
     

    <div class="text">
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
      </p>
    </div>

【问题讨论】：

请阅读How to create a Minimal, Reproducible Example。

@ScottieG 我将添加我所做的示例代码，但为什么你认为问题不是最小的？我理解难以阅读，因为我不是以英语为母语的人。但我仍然认为这个问题不是最小的。

@I3lue - 我从来没有说过你最初的问题不是最小的，我建议你添加一个最小的、可重复的例子。基本上，获得与您所经历的相同结果所需的最少代码，因此我们可以提供帮助。

【参考方案1】：

[在此处输入图片描述][1]

我给你示例代码。

    .text 
       width: 400px;
       height: 600px;
       font-family: Helvetica;
       display: flex;
       border: 1px solid black;
     
     p 
       align-self: center;
       // line-height: 3em;
       margin: 1em;
     


<div class="text">
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor 
        incididunt ut labore et dolore magna aliqua.
      </p>
</div>


  [1]: https://i.stack.imgur.com/hGxMS.png

【讨论】：

这不起作用。文本块仍然有很大的空间

如果你想要行和行之间的小空间，最好删除行高。