-2

When I give a line-height to the text div(span, p, etc.) and drag it in the browser, the selection box has an ugly empty space like this:

enter image description here

I want to lift up the text itself inside of the selection box for looking more better when the user is dragging it. I've searched about this topic on Google but couldn't find any clues to do this.

Are there any ways to solve this problem?

Code: 

      * {
        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>
l3lue
  • 531
  • 4
  • 16
  • Please read [How to create a Minimal, Reproducible Example](https://stackoverflow.com/help/minimal-reproducible-example). – ScottieG Jun 10 '19 at 07:33
  • @ScottieG I will add the sample code that what I've done, but why do you think the question is not minimal? I understand about hard to read because I'm not a native English speaker. But still I don't think the question is not minimal. – l3lue Jun 10 '19 at 07:58
  • @I3lue - I never said your original question wasn't minimal, what I suggested was that you add a minimal, reproducible example. Basically, the minimal code required to get the same result you have experienced so we can help. – ScottieG Jun 10 '19 at 08:26

1 Answers1

0

[enter image description here][1]

I give you the sample code. 

    .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
Lun Leong
  • 61
  • 7