Выровняйте по вертикали элемент, который «свисает» с div, который горизонтально выровнен с его собеседником. - PullRequest
Новая
       18

Выровняйте по вертикали элемент, который «свисает» с div, который горизонтально выровнен с его собеседником.

0 голосов
/ 16 марта 2019

Я не знаю, как кратко описать то, что я пытаюсь достичь словами, поэтому вот картинка ASCII: 

   (+1)  | Enter your phone number |
         | Enter your name         |

У меня есть два <input> s, один для номера телефона иодин для имени.Они должны быть выровнены по горизонтали (в том же «столбце»).

У меня также есть <span> (код страны, еще один фрагмент данных, который необходимо ввести вместе с номером телефона).Это должно «повесить» телефонный номер, введенный слева.

Я бы хотел расположить центр страны по вертикали так, чтобы он находился посередине ввода телефонного номера.

ЭтоКажется, что это возможно с помощью CSS Grid.Мне интересно: есть ли решение, которое не использует CSS Grid ?

Вот фрагмент того, что я имею до сих пор.Я использую метод "размер нулевой позиции: относительный элемент с его содержимым в позиции: абсолютный дочерний элемент", чтобы исключить элемент "код страны" из потока, чтобы он не нарушал горизонтальное выравнивание.

Как видите, он не центрирует код страны по вертикали. 

input {
  height: 2rem;
}

.container {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.phone-number-input-container {
  display: inline-flex;
  align-items: center;
}

.name-input-container {
  margin-top: 1rem;
}

.country-code-container {
  position: relative;
  width: 0;
  height: 0;
}

.country-code {
  position: absolute;
  right: 1rem;
}
<html>
  <body>
    <div class='container'>
      <div class='phone-number-input-container'>
        <span class='country-code-container'>
          <b class='country-code'>+1</b>
        </span>
        <input class='input' placeholder="Phone number"></input>
      </div>

      <div class='name-input-container '>
        <input class='input' placeholder="Name"></input>
      </div>
    </div>
  </body>
</html>

Ответы [ 2 ]

2 голосов
/ 16 марта 2019

Вы почти хороши, просто используйте position:absolute в верхнем контейнере и отрегулируйте только левое значение, поскольку flexbox уже центрируется по вертикали (поэтому нет необходимости устанавливать top) 

input {
  height: 2rem;
}

.container {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.phone-number-input-container {
  display: inline-flex;
  align-items: center;
  position:relative;
}

.name-input-container {
  margin-top: 1rem;
}

.country-code-container {
  position: absolute;
  left:-2rem;
}
<html>
  <body>
    <div class='container'>
      <div class='phone-number-input-container'>
        <span class='country-code-container'>
          <b class='country-code'>+1</b>
        </span>
        <input class='input' placeholder="Phone number">
      </div>

      <div class='name-input-container '>
        <input class='input' placeholder="Name">
      </div>
    </div>
  </body>
</html>

Другая идея состоит в том, чтобы рассмотреть отрицательную маржу, как показано ниже, и вам больше не нужно position:absolute

input {
  height: 2rem;
}

.container {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.phone-number-input-container {
  display: inline-flex;
  align-items: center;
  position:relative;
}

.name-input-container {
  margin-top: 1rem;
}

.country-code-container {
  margin-left:-30px;
  margin-right:30px;
  width:0;
}
<html>
  <body>
    <div class='container'>
      <div class='phone-number-input-container'>
        <span class='country-code-container'>
          <b class='country-code'>+1</b>
        </span>
        <input class='input' placeholder="Phone number">
      </div>

      <div class='name-input-container '>
        <input class='input' placeholder="Name">
      </div>
    </div>
  </body>
</html>

Вы также можете сделать перевод: 

input {
  height: 2rem;
}

.container {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.phone-number-input-container {
  display: inline-flex;
  align-items: center;
  position:relative;
}

.name-input-container {
  margin-top: 1rem;
}

.country-code-container {
  transform:translateX(-30px);
  width:0;
}
<html>
  <body>
    <div class='container'>
      <div class='phone-number-input-container'>
        <span class='country-code-container'>
          <b class='country-code'>+1</b>
        </span>
        <input class='input' placeholder="Phone number">
      </div>

      <div class='name-input-container '>
        <input class='input' placeholder="Name">
      </div>
    </div>
  </body>
</html>
1 голос
/ 16 марта 2019

Почему не flexbox?Сетка может быть слишком толстой 

.wrapper {
  display:flex
}
input {
  width:300px
}
<div class="wrapper">
  <div class="country-code">
    (+1)
  </div>
  <div class="right">
  <div class="phone">
   <input type="phone" placeholder="Enter your phone numner">
  </div>
  <div class="name">
    <input type="text" placeholder="Enter your name">
    </div>  
  </div>
  
</div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...