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

Question

当我在文本line-height（div，span等）中输入p并将其拖到浏览器中时，选择框的外观很难看像这样的空间：

我想抬起选择框内的文本本身，以便在用户拖动时看起来更好。我已经在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>

Answer 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