Задать вопрос
Toxa26
@Toxa26
Студент. Люблю верстать сайты.
html

Как выровнять элементы блока?

Как лучше и как правильнее выровнять элементы блока по центру, но что бы центральные инпуты были ровно один под другим? (Не используя grid, желательно с помощью flex).
Пример - https://codepen.io/ANTON_ZIN_/pen/NWjZdww

<div class="parent">
  <div class="row">
    <span>Name:</span>
    <input type="text"><br>
  </div>
  <div class="row">
    <span>Surname:</span>
    <input type="text">
  <input class="small" type="text">
  </div>
</div>


.parent {
  width: 400px;
  padding: 10px;
  border: 1px dashed red;
}

.row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  margin-bottom: 5px;
}

.small {
  width: 40px;
}
  • Вопрос задан
  • 146 просмотров
5 комментариев
Подписаться 1 Простой 5 комментариев
Решения вопроса 1
Pavel-ww
@Pavel-ww
Как то так
Ответ написан
Комментировать
Комментировать
Пригласить эксперта
Ответы на вопрос 3
@Radical0x3
Front-End Developer
Что-то в этом роде?
Ответ написан
Комментировать
Комментировать
sergski
@sergski
web-developer 
.parent {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
Ответ написан
2 комментария
2 комментария
@Zorroti
Вот HTML:
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<link rel="stylesheet" href="style.css">
</head>
<body>
	<div class="parent">
  		<div class="row">
    		<span>Name:</span>
    		<input type="text"><br>
  		</div>
  		<div class="row">
   			<span>Surname:</span>
	    	<input type="text">
	  		<input class="small" type="text">
  		</div>
	</div>
</body>
</html>


И CSS:
.parent {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 400px;
  padding: 10px;
  border: 1px dashed red;
}

.row {
  width: 260px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: space-between;
}

.small {
  width: 40px;
  margin-top: 6px;
}
Ответ написан
3 комментария
3 комментария
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
Тестировщик-стажёр
ITooLabs • Тула
от 35 000 до 40 000 ₽
Fullstack PHP Developer
Smapse Education
от 40 000 до 65 000 ₽
Trainee - IT Support
move2usajobs.com LLC • Лос-Анджелес
от 2 000 до 4 000 $
Ещё вакансии
Заказы с Хабр Фриланса
Написать индикатор на TradingView по хаям/лоям дня недели
25 апр. 2024, в 08:45
4000 руб./за проект
Вычислить размер объекта по карте глубин
25 апр. 2024, в 07:37
5000 руб./за проект
Спарсить TON PLACE: скрейпинг фото и текста с анкет по списку URL
25 апр. 2024, в 05:57
3000 руб./за проект
Ещё заказы