Как выровнять текст по вертикали внутри поля выбора? (не говоря о блоке выбора или блоке div) - PullRequest
Новая
       43

Как выровнять текст по вертикали внутри поля выбора? (не говоря о блоке выбора или блоке div)

0 голосов
/ 10 июня 2019

Когда я даю line-height тексту div (span, p и т. Д.) И перетаскиваю его в браузере, в поле выбора появляется ужасное пустое место, подобное этому:

enter image description here

Я хочу поднять сам текст внутри поля выбора, чтобы он выглядел лучше, когда пользователь перетаскивает его.Я искал эту тему в 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>

1 Ответ

0 голосов
/ 10 июня 2019

[введите описание изображения здесь] [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
...