![](/logo_grey.gif)
Последние записи
- Как в Python+Selenium webdriver открыть новую вкладку в уже открытом браузере?
- Lazarus, проверка существования строки таблице
- BASM и record, обращение к полям записи
- Web PHP Framework Symfony
- Относительный путь для вывода картинки на html странице
- Массовое открытие гиперссылок в браузере
- Скопировать значение строки из таблицы в textarea
- Рамки для страниц отчетов
- Вывод StdOut консоли в TMemo
- Чтение из файла большого размера (нехватка памяти)
![](http://programmersclub.ru/slurm3.jpg)
Интенсив по Python: Работа с API и фреймворками 24-26 ИЮНЯ 2022. Знаете Python, но хотите расширить свои навыки?
Slurm подготовили для вас особенный продукт! Оставить заявку по ссылке - https://slurm.club/3MeqNEk
![](http://programmersclub.ru/katajpg.jpg)
Online-курс Java с оплатой после трудоустройства. Каждый выпускник получает предложение о работе
И зарплату на 30% выше ожидаемой, подробнее на сайте академии, ссылка - ttps://clck.ru/fCrQw
24th
Окт
Вёрстка табличная vs. CSS
Posted by obzor under HTML
Сегодня мне потребовалось решить несколько проблем при вёрстке собственной простенькой формы авторизации для моего очередного проекта.
Предо мной стояло всего две задачи:
1 — форма должна быть отцентрирована по горизонтали и по вертикали;
2 — поля ввода логина и пароля должны быть выровнены относительно друг друга, а лейбы с подписями должны «обтекать» эти поля ввода.
При решении первой задачи я нарвался на помесь CSS и использования тегов <table> и <div> …
Как можно реализовать поставленную мною задачу более «правильно» что ли ?
Чем меньше лишних тегов, тем лучше.
На данный момент самый кошерный способ для такой задачи — это гриды. А отцентрировать можно любым удобным способом, но чтобы не вводить новые блоки, удобнее всего флексом.
<form class="login-form" action="index.php" method="post"> <label class="login-form_label" for="login">Логін:</label> <input class="login-form_value" name="login" id="login" type="text" size="15" maxlength="15"> <label class="login-form_label" for="password">Пароль:</label> <input class="login-form_value" name="password" id="password" type="password" size="15" maxlength="15"> <input class="login-form_submit" type="submit" value="Увійти"> </form>
Можно например так:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style>
form{
width: 15%;
margin:50vh auto;
display: table;
}
input{
display: table-column;
text-align: right;
}
span{
display: table-row;
}
label{
display:table-cell;
text-align: left;
}
</style>
</head>
<body>
<form action="index.php" method="post">
<span>
<label>Логін:</label>
<input name="login" type="text" size="15" maxlength="15">
</span>
<br>
<span>
<label>Пароль:</label>
<input name="password" type="password" size="15" maxlength="15">
</span>
<br>
<input type="submit" value="Увійти">
</form>
</body>
</html>
Похожие статьи
Купить рекламу на сайте за 1000 руб
пишите сюда - alarforum@yandex.ru
Да и по любым другим вопросам пишите на почту
![пеллетные котлы](http://programmersclub.ru/respective.jpg)
пеллетные котлы
![пеллетный котел](http://programmersclub.ru/emtas.jpg)
Пеллетный котел Emtas
![форум программистов](http://programmersclub.ru/banf336х280.gif)
Наши форумы по программированию:
- Форум Web программирование (веб)
- Delphi форумы
- Форумы C (Си)
- Форум .NET Frameworks (точка нет фреймворки)
- Форум Java (джава)
- Форум низкоуровневое программирование
- Форум VBA (вба)
- Форум OpenGL
- Форум DirectX
- Форум CAD проектирование
- Форум по операционным системам
- Форум Software (Софт)
- Форум Hardware (Компьютерное железо)