html — Как выровнять input по центру?
Вопрос задан
Изменён 3 года 3 месяца назад
Просмотрен 23k раз
не получается выровнять по центру форму. Уже всё попробовал. Flex использовать не вариант. Так же не получается сделать кнопку по ширине input-ов или тоже разместить по центру.
form {
display: block;
background: #5B3C67;
padding: 50px;
width: 100%;
color: white;
margin-right: auto;
margin-left: auto;
}
form input {
text-align: center;
padding: 10px;
margin-bottom: 20px;
//margin-left: 40%;
width: 23%;
height: 15px;
border: 1px solid #ff8c00;
}
.button {
width: 20%;
font-size: 14pt;
color: white;
background: #7F113E;
height: 55px;
padding: 10px;
border: 1px solid #F5C4AB;
}
.
button:hover {
border: 1px solid white;
}
<section> <div> <form action="send.php" method="post"> <h2>Свяжитесь с нами</h2> <input type="text" name="name" size="15" maxlength="20" value="" placeholder="Ваше имя" required><br> <input type="text" name="email" size="15" maxlength="20" value="" placeholder="Ваш e-mail" required><br> <input type="text" name="name" size="15" maxlength="20" value="" placeholder="Ваш телефон" required><br> <input type="submit" name="Submit" value="Отправить"><br> </form> </div> </section>
- html
- css
- css3
0
не нужно добавлять у самих input-ов text-align:center, полезнее у родителя:
form {text-align:center;}
по поводу одинаковой ширины — определить у input и button
width: 25%;
только еще у input добавить
box-sizing: border-box;
чтобы padding не влияли на ширину
form {
display: block;
background: #5B3C67;
padding: 50px;
width: 100%;
color: white;
margin-right: auto;
margin-left: auto;
text-align: center;
}
form input {
box-sizing: border-box;
padding: 10px;
margin-bottom: 20px;
//margin-left: 40%;
width: 25%;
height: 35px;
border: 1px solid #ff8c00;
}
. button {
width: 25%;
font-size: 14pt;
color: white;
background: #7F113E;
height: 55px;
padding: 10px;
border: 1px solid #F5C4AB;
}
.button:hover {
border: 1px solid white;
}
<section>
<div>
<form action="send.php" method="post">
<h2>Свяжитесь с нами</h2>
<input type="text" name="name" size="15" maxlength="20" value="" placeholder="Ваше имя" required><br>
<input type="text" name="email" size="15" maxlength="20" value="" placeholder="Ваш e-mail" required><br>
<input type="text" name="name" size="15" maxlength="20" value="" placeholder="Ваш телефон" required><br>
<input type="submit" name="Submit" value="Отправить"><br>
</form>
</div>
</section>С flex
.center {
display: flex;
justify-content: center;
margin: 0 auto;
padding: 10px 20px;
}
form {
background: #5B3C67;
padding: 50px;
color: white;
margin-right: auto;
margin-left: auto;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
form input {
text-align: center;
padding: 10px;
margin-bottom: 20px;
//margin-left: 40%;
width: 23%;
height: 15px;
border: 1px solid #ff8c00;
width: 150px;
}
. button {
width: 20%;
font-size: 14pt;
color: white;
background: #7F113E;
height: 55px;
padding: 10px;
border: 1px solid #F5C4AB;
width: 200px;
}
.button:hover {
border: 1px solid white;
}
<section> <div> <form action="send.php" method="post"> <h2>Свяжитесь с нами</h2> <input type="text" name="name" size="15" maxlength="20" value="" placeholder="Ваше имя" required><br> <input type="text" name="email" size="15" maxlength="20" value="" placeholder="Ваш e-mail" required><br> <input type="text" name="name" size="15" maxlength="20" value="" placeholder="Ваш телефон" required><br> <input type="submit" name="Submit" value="Отправить"><br> </form> </div> </section>
1
Разобрался.
Надо было добавить:
form input {
display: block;
margin-left: auto;
margin-right: auto;
}1
Ваш ответ
Зарегистрируйтесь или войдите
Регистрация через Facebook
Регистрация через почту
Отправить без регистрации
Почта
Необходима, но никому не показывается
Отправить без регистрации
Почта
Необходима, но никому не показывается
Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки
Красивое выравнивание блоков по резиновой сетке — CSS-LIVE
Сегодня, в мой день рождения (26 апреля), я хочу сделать подарок всем верстальщикам и представить вам абсолютно уникальное, новое и самое главное — полезное решение выравнивания блоков по резиновой сетке, которого так все долго ждали и которого ещё нет в сети.
При верстке резиновых страниц часто возникает задача выстроить однотипные блоки (например, товары в каталоге или фотографии в галерее) по сетке, наподобие таблицы, но гибкой, с заранее неизвестным количеством столбцов. Когда-то единственным способом для этого был float, и блоки приходилось прижимать к левому краю. С помощью inline-block эту задачу можно решить проще и гибче, блоки могут иметь разную высоту, и разное вертикальное выравнивание. Но почему-то такие макеты в массе всё равно прижаты к левому краю. Казалось бы, что мешает отцентрировать эту сетку, а то и вовсе растянуть ее по ширине свободного места c помощью text-align: center или justify соответственно?
Проблема возникает в последней строке, на которой горизонтальный ритм сетки сбивается. Но оказалось, что эту проблему можно решить!
Проблема
Для начала предлагаю обсудить этот вопрос подробнее.
Посмотреть примеры того, что именно за неприятность происходит с последней строкой в сетке, а так же определиться, какого результата мы ждём.
Проблема очень похожа в обоих случаях, так что выберем любое свойство из двух, например, text-align: center. А так же воспользуемся маркированным списком.
<ul> <li>Пункт 1</li> <li>Пункт 2</li> <li>Пункт 3</li> <li>Пункт 4</li> <li>Пункт 5</li> <li>Пункт 6</li> <li>Пункт 7</li> <li>Пункт 8</li> </ul>
ul {
font: 14px Verdana, Geneva, sans-serif;
text-align: center;
}
ul li {
display : inline-block;
width : 80px;
height: 80px;
margin-bottom: 10px;
background: #E76D13;
vertical-align: top;
text-align: center;
line-height: normal;
/* эмуляция inline-block для IE6-7*/
//display : inline;
//zoom : 1;
}
Обычный список, всё те же старые добрые элементы строчно-блочного (display : inline-block) уровня. Самое пожалуй интересное, что стоит выделить, это text-align: center, благодаря которому и происходит наше горизонтальное выравнивание.Пока пункты занимают единственную строку, всё выглядит так.
Но, как только на поле появляется последняя строка, кол-во блоков в которой меньше, чем в предыдущих строках, то получается следующее.
Вроде бы тоже неплохо, всё происходит так, как и должно происходить. Последняя строка так же, как и предыдущие — выравнивается по середине. Но, именно это выравнивание и создаёт нам проблему. Блоки находятся по середине, создавая по бокам много ненужного и пустого пространства. Если бы, например, в последней строке остался всего один блок, то этого бы пространства стало ещё больше, а сам блок болтался бы в середине, как изгой на пустыре.
А теперь, давайте взглянем, чтобы мы хотели получить.
Как видно из рисунка, два элемента в последней строке прижались к левому краю, не смотря на то, что строка по ширине явно больше, чем общая ширина её блоков. Это видно по правому, свободному пространству, которое составляет две трети наших элементов. Именно такое поведение блоков нам и нужно получить в итоге. Т.е. по сути сделать так, чтобы выравнивание элементов было красивым, строящимся ровно по сетке (даже по резиновой), не взирая на своё количество и лишнее пустое пространство в последней строке. Говоря другими словами, нам нужно каким либо образом повлиять на поведение последней строки, заставив её подчиняться нашим правилам.
Как это работает?
Перед тем, как перейти непосредственно к решению задачи, давайте для начала разберём алготитм работы таких свойств, как text-align: center и justify. Это поможет нам лучше понять, что происходит в нашей сетке, её поведение, и то, как выполняется работа этих свойств в последней строке.
text-align: center
Начнём пожалуй с text-align: center. В нем можно выделить три основных этапа.
Первый этап
В начале берётся строка. Высчитывается общая ширина слов или неразрывных блоков (inline-block, img, и т.д) в строке. Причём если между этими блоками есть фактические пробелы или же отступы, которые сделаны с помощью таких средств, как word-spacing и прочих, то эти расстояния так же добавляются к общей сумме ширины блоков.
Второй этап
На этом этапе всё ещё проще. Вычисляется оставшееся ширина строки, т.е. всё свободное пространство, которое не вошло в сумму общей ширины слов с их межсловным расстоянием.
Третий этап
Ну и в завершающем этапе происходит следующее. Самая первая в строке площадка с буквой сдвигается вправо ровно на половину результата, полученного после этапа номер два. Что даёт абсолютно равные отступы справа и слева самой строки.
Чтобы лучше понять, как всё происходит, я сделал специальный рисунок.
Перед нами рисунок, на котором изображён контейнер, с двумя строками, ширина которых составляет 500px.
Так же мы можем видеть, что сумма всех блоков в первой строке с их интервалами равна 370px. Значит на третьем этапе наш алгоритм вычел из первого второе (500-370), что дало результат 130. Далее, как я уже говорил, поделил эту сумму ровно на два раза (130/2) и отодвинул самый первый блок вправо, на полученный результат (65px). Таким образом наши блоки оказались точно по середине, с отступы по бокам стали абсолютно одинаковыми. Если бы в первой строке не хватило места, то самый крайний справа блок перешёл бы на второю строку и алгоритм снова включился бы в дело.
Тоже самое касается и второй строки. В ней алгоритм работает точно так же, мало того, можно увидеть, что боковые отступы в ней составляют дробное число (132.5px), так как text-align: center делит общую ширину блоков с их интервалами ровно на 2, как я и говорил.
В принципе ничего сложного, всё вполне понятно и логично. В нашей ситуации важно понять, что, если в последней строке остаётся один блок, то он выравнивается ровно по середине, за счёт высчитанного, свободного пространства справа. А это как раз то, что нам и нельзя допускать.
text-align: justify
Механизм text-align: justify, я уже описывал в одной из своих статей. Повторяться не имеет смысла, поэтому я вам, настоятельно рекомендую пройти по ссылке и внимательно перечитать там всё, что касается алгоритма и этапов работы text-align: justify.
Единственное, что я хочу упомянуть здесь, это то, что…
Последняя же строка не попадает в поле зрения justify, так как он работает только для целиком заполненных строк, а в последней строке пробелы всегда остаются своего обычного размера.
Да, именно так. text-align: justify в отличии от text-align: center вообще отказывается работать с последней строкой, и поэтому выравнивания по ширине в ней не происходит.
Так что это тоже входит в наши обязанности, а именно заставить неработающий алгоритм действовать, и в завершающей строчке.
Решение
Сразу забегу вперёд и скажу, что решение для обоих случаев абсолютно идентично, поэтому нет смысла разбирать каждое из них в отдельности. Так что давайте поразмыслим, что у нас есть на данный момент.
Значит, по сути, у нас есть два свойства text-align: justify и center, каждый из которых выравнивает строки по собственному алгоритму. А так же мы уже понимаем, что text-align: center работает с последней строкой, а вот text-align: justify — нет. Но зато мы точно знаем, что если строка, за которой идёт следующая (допустим последняя) будет полностью заполнена, то эти свойства будут выравнивать нашу сетку по нашим правилам. И даже при резиновой ширине контейнера такие заполненные строки будут вести себя так, как нам хотелось бы.
Какой же вывод можно из этого сделать? И как можно связать эти вещи с последней строкой, в которой может быть всего один блок? Ответ прост.
Нам нужно придумать, как можно заполнить последнюю строку так, чтобы, оставшееся от общей ширины блоков пространство, было чем-то заполнено, и мало того, чтобы это «чем-то» могло переходить на следующую строку, для того, чтобы наши свойства работали безукоризненно.
Итак, для заполнения последней строки, мы будем использовать псевдоэлемент, сгенерированный при помощи :after. Это хороший вариант, так как он поможет решить нам нашу задачу и избавит от лишнего мусора в разметке. По умолчанию псевдоэлементы генерируют строчный блок, а значит именно то, что нам и нужно. Так как inline-block будет представлять из себя одну большую, неразрывную букву и не сможет разбиться на несколько «кирпичей», что не приведёт ни к чему путному. Ну, а block сразу же займёт отдельную строку, и так же, как и inline-block — не принесёт результатов. При этих значениях наша ситуация будет выглядеть примерно так.
ul:after {
content: 'display: block, мало контента';
display: block;
background: #E76D13;
}
Как видно, из скриншота, вспомогательный блок сразу же занял новую строку, оставив прежнюю (последнюю по факту) подчиняться правилам алгоритма. Каких-то положительных результатов такими средствами добиться невозможно, как бы вы не пытались, так что отбрасываем эти вещи и переходим к настоящему решению…
Из всего вышесказанного можно понять одно, что в нашей ситуации нам может помочь элемент, именно строчного (inline) уровня, т.е. обычный display : inline + строка текста, с пробелами между слов.
ul:after {
content: 'Обычный строковый элемент, обычный строковый элемент, обычный строковый элемент';
background: #E76D13;
}
Да, очень похоже. Из скриншота ясно, строчный блок, мало того, что смог повлиять на последнюю строку, так ещё и перенёсся на следующую не полностью, оставив на предыдущей строчке неразрывное слово.
По этому слову видно, что по своей ширине оно немного не дотягивает до ширины блоков (100px), а если бы дотягивало, то, возможно, у нас и вышло бы что-то путное.
В общем поэкспериментировав какое-то время с вышесказаннным, на свет родилось следующее решение.
ul {
font: 14px Verdana, Geneva, sans-serif;
text-align: center;
margin: 0px 0 10px;
}
ul:after {
content: ' i i i i i i i i ';
word-spacing: 97px;
padding-left: 97px;
/* visibility: hidden; Скрыл это свойство, ради демонстрации процесса*/
}
ul li {
display : inline-block;
width : 100px;
height: 100px;
margin: 0px 0 20px;
background: #E76D13;
vertical-align: top;
text-align: center;
/* эмуляция inline-block для IE6-7*/
//display : inline;
//zoom : 1;
}
Здорово! Наша сетка выровнена так, как нам надо. Сразу же скажу, что такое выравнивание получается при любой ширине экрана, что не может не радовать.
А теперь сама суть.
Значит у нас есть строка «i i i i i i i i» , состоящая из букв и пробелов, но это не простые буковки и пробелы, как может показаться на первый взгляд. Во-первых сама буква i выбрана не случайно. Дело в том, что буква i сама по себе узкая, за счёт чего ей легко управлять и подгонять нужную ширину. Во-вторых сами пробелы состоят не только из символа пробела, но и из word-spacing, т.е. его значение плюсуется к пробелу, что в сумме даёт нужную нам ширину. Да, и конечно же, нужно учитывать, что связка «пробел + word-spacing» работает только тогда, когда в конце неё идёт другой символ, отличный от пробельного. Так как пробелы имеют свойство «схлопывания», то буквы i, идущие после word-spacing не дают им этого сделать.
Так что, по сути, мы имеем неразрывные псевдоблоки, в виде «буквы + padding-left» вначале псевдоэлемента, а далее в виде связки «пробел + word-spacing + буква», и так до конца строки.
Ну, а на следующей строчке всё повторяется заново, только первый псевдоблок состоит теперь из одной буквы. Но эта строка нас уже не волнует, нас интересуют только те «добавочные блоки», которые дополняют последнюю строку с нормальными блоками в сетке.
Кстати, букв должно хватить, чтобы гарантировано заполнить последнюю строку до конца в худшем случае. Т.е. их число должно быть равно максимальному кол-ву блоков в строке.
Да, и, конечно же, с text-align: justify этот метод работает точно так же.
Но это были плюсы, а как же минусы? Минусы у этого варианта таковы:
Во-первых, в нестабильной работе в Opera, блоки в которой, временами имеют нечёткое выравнивание по сетке. Причём это касается только последней и предпоследней строк. Не понятно, из-за чего это происходит, к сожалению мне так и не удалось это выяснить. Возможно проблема кроется в том, что крайняя буква прилипает к блоку, не чувствуя между ними пробела. В любом случае, очень надеюсь на то, что в комментах кто нибудь сможет дать пояснение этой загвоздки.
Но, в целом, это не выглядит безобразно, т.е. работает, но просто немного нестабильно.
Во-вторых, из-за создания дополнительных элементов снизу образовывается неприятный отступ, который происходит за счёт его размера шрифта и межстрочного интервала. Лекарство в виде обнуления шрифта + межстрочного интервала у родителя и восстановлением их в нормальное состояние у потомков — не приносит результата, так как нужная нам строка в псевдоэлементе становится невидимая, и наша сетка перестаёт её чувствовать и поддаваться дрессировке.
Но есть всё же «почти» выход из ситуации, это нижний отрицательный margin, который может подтянуть часть своего «хвоста», позволяя следующим за ним элементам налезать на него. Подробнее об этом можно почитать тут. Я сказал «почти», потому что этот способ выручает отчасти, я бы сказал, на половину, может чуть больше. Так как в момент создания, уже двух-строчного хвоста, из букв, подтянуть обе строки, уже не представляется возможности.
Во-третьих, чтобы заставить этот метод работать в IE6-7, нам потребуется заменить наш псевдоэлемент дополнительным блоком-помощником, который будет вставлен в конце списка. Плюс к этому придётся воспользоваться такими средствами, как text-justify, text-align-last (их поведение я уже описывал в этой статье), восстановлением свойства zoom в начальное состояние, у дополнительного блока и прочими «радостями», благодаря которым, в этих браузерах наш способ будет работать так же. В конце статьи я обязательно приведу разные варианты этой задачи, чтобы вы могли выбрать нужный.
Резюме
В этой статье мы доказали, что блочная сетка не такая уж и неподвластная. Как оказалось, это вполне управляемая конструкция. Мало того, красивое выравнивание блоков в сетке можно достичь совершенно обычным и не трудным способом, а результат позволяет нам легко использовать его плоды в любых проектах. Что я и делаю, когда предоставляется такая возможность.
Да, и конечно же, хочется выразить огромную благодарность Илье Стрельцыну (@SelenIT2) за его идеи и невероятную помощь в материалах. Без него бы этой статьи не было.
Все решения воедино
Обновление от 30.03.2017: Современное решение этой задачи на Grid Layout (без хаков и лишнего кода)
P.S. Это тоже может быть интересно:
Справочный центр
Справочный центр Тильды
Подробные инструкции по функциям, ответы на часто задаваемые вопросы, ознакомительный тур и полезные ссылки
Начало работы
Настройки сайта
Шапка и подвал
Настройка шрифтов ⭐️
Главная страница
Создание папок
Совместное редактирование сайта
Фавикон (иконка во вкладке)
Показать все →
Как устроена Тильда ⭐️
Как сделать одностраничный сайт
Как сделать интернет-магазин
Как сделать многостраничный сайт
Показать все →
Домен и HTTPS
Как подключить домен к сайту ⭐️
Как купить домен
Подключение HTTPS ⭐️
Как сделать почту для домена
Как делегировать домен на DNS Тильды
Ошибки при подключении домена
Показать все →
Показать все →
Интернет-магазин и прием платежей ⭐️
Работа с корзиной
Каталог и добавление товаров
Добавление вариантов и опций товара
Список платежных систем ⭐️
Сервисы доставки
Интернет-магазин
Формы приема данных
Настройка приема данных ⭐️
Настройка блоков с формами
Email
Tilda CRM ⭐️
Google Таблицы
Страница благодарности
Показать все →
Показать все →
Как сделать меню
Работа с обложкой
Якорные ссылки
Настройка мобильной версии
Действия со страницей ⭐️
Редактирование страницы
Статистика сайта
Встроенная cтатистика сайта ⭐️
Статистика интернет-магазина
Подключение Яндекс.
Метрики
Подключение Google Analytics
Подключение Google Tag Manager
Пиксель Facebook
Показать все →
Показать все →
Гид по SEO ⭐️
Как добавить сайт в Google и Яндекс
Панель SEO-рекомендаций для сайта ⭐️
Запрет индексации сайта
Как добавить теги h2, h3, h4
Как добавить ключевые слова
SEO
Zero Block
Начало работы ⭐️
Отзывчивый дизайн
Список горячих клавиш
Базовая анимация
Пошаговая анимация
Учебник по веб-анимации ⭐️
Показать все →
Показать все →
Тарифные планы ⭐️
Отмена автопродления подписки
Оплата по безналичному счету
Как скачать инвойс
Переход с Personal на Business
Нужно больше сайтов
Тарифы и платежи
Потоки и новости
Как сделать блог
Подключение потоков на сайт ⭐️
SEO-настройки постов
Google AMP и Яндекс.Турбо
Добавление комментариев к постам
Показать все →
Личный кабинет
Презентация личного кабинета
Добавление пользователей
Страница регистрации
Регистрация через формы
Платный доступ в личный кабинет
Показать все →
Показать все →
Вставка кода на страницу
Вставка кода в head сайта
Экспорт сайта
АPI для синхронизации страниц
Отправка данных на Webhook
Плагин для WordPress
Разработчикам
Конструктор писем
Презентация конструктора писем
Создание и отправка писем ⭐️
Автоматизация рассылок
Сервисы отправки данных
Подписка на курс с платной рассылкой
Показать все →
Популярные запросы
Видеотуториалы →
Видеотуториалы →
Показать больше видео →
Как сделать одностраничный сайт
Как сделать многостраничный сайт
Пошаговая анимация в Tilda
Как сделать онлайн-магазин
Как сделать блог
Начало работы
Как работать в текстовом редакторе
Как настроить форму
Как сделать меню сайта
Как настроить шапку и подвал
Вёрстка в Zero Block в прямом эфире
Пошаговая анимация
Резиновая верстка сайта
Как перенести макет из графического редактора в Tilda
Сложная анимация в Zero Block
35:12
20:30
26:24
16:10
11:44
РАБОТА В РЕДАКТОРЕ
ZERO BLOCK
Как работать в Tilda CRM
Как подключить сервисы приема данных
Мультиязычный сайт на Тильде
Как настроить корзину
Как добавить варианты товаров
Как сделать удобную навигацию на сайте
Сетка сайта на Тильде: как навести визуальный порядок
Как дизайнеру на Tilda получать первые заказы
Типографика сайта на Тильде
Где дизайнеру на Тильде разместить портфолио
НАСТРОЙКИ САЙТА
ДИЗАЙН
Найти дизайнера в Tilda Experts
Чтобы найти проверенного исполнителя для своего проекта, заполните бриф на площадке Tilda Experts и получите отклики релевантных экспертов.
Подробнее →
Tilda Education →
Образовательный журнал платформы для создания сайтов Tilda Publishing. Практические руководства по дизайну и маркетингу для цифровых проектов.
Больше материалов →
Создание Landing Page
Интернет-маркетинг с нуля
Дизайн в цифровой среде
Анимация в вебе
Как создать сайт. Пошаговое руководство
Как сделать интернет-магазин самостоятельно с нуля
Как делать красивые статьи на Тильде
Советы по созданию навигации
Чек-лист: ошибки дизайна
Где найти картинки для сайта или статьи
Как сделать обложку сайта
Руководство по выбору шрифта
Руководство по Zero Block
Бесплатный онлайн-учебник, который научит создавать эффективные посадочные страницы
Онлайн-учебник, который научит работать с веб-аналитикой и продвигаться в социальных сетях
Бесплатный онлайн-учебник, из которого вы узнаете о видах веб анимации и правилах ее использования
Онлайн-учебник об этапах работы над веб дизайном, теории дизайна и развитии визуального вкуса
СОЗДАНИЕ САЙТА
ДИЗАЙН
Как написать текст для лендинга
SEO продвижение сайта на Тильде
Создание E-mail рассылки
Как найти и исправить ошибки SEO
Персонализация лендинга для разных клиентов
Как собрать список ключевых фраз для поисковой рекламы
Пошаговый гид по запуску рекламы в Инстаграме для новичков
Пошаговый гид по запуску рекламы в Фейсбуке для новичков
Продвижение в социальных сетях
МАРКЕТИНГ
РЕКЛАМА И SMM
Tilda.
cc
Tilda Education
Видеоуроки
Вебинары
Блог
Сообщить о нарушении прав
Если вы считаете, что пользователь Tilda Publishing нарушает ваши права, отправьте нам сообщение через форму
Как связаться с поддержкой
Для консультаций по функциям платформы используйте форму обратной связи в вашем личном кабинете или напишите на [email protected]
Для бухгалтерии
Получить закрывающие документы или подтверждение платежа — напишите на [email protected]
Made on
Tilda
html выравнивание текста по вертикали
Автор admin На чтение 6 мин. Просмотров 252 Опубликовано
Выравнивание элементов на веб-странице может оказаться не такой легкой задачей, особенно если речь идет об выравнивание текста по вертикали. Этот вопрос часто встречается на форумах, и особую трудность решение этого вопроса вызывает у начинающих пользователей.
Но на самом деле здесь сложного ничего нет. Все что нужно, это немного владеть знаниями каскадной таблицы стилей CSS. Так как это все делается за счет ее правил.
Выравнивание текста по вертикали можно добиться по меньшей мере пятью разными способами. Каждый из них по-своему хорош, учитывая обстоятельства и детали ситуации. Мы рассмотрим несколько примеров, а вы исходя из условий, подберете себе подходящее ращение.
Содержание
- Первый метод с line-height
- Выравнивание со свойством position
- Выравнивание со свойством table
- Выравнивание со свойством flex
- Выравнивание со свойством transform
- Навигация по статье:
- Свойство для вертикального выравнивания vertical-align
Первый метод с line-height
Первый способ очень банальный и с большим недостатком, что ограничивает его в применении. Но все же, как ни крути, он может пригодиться и даже принести нужный результат. Это будет условным выравниванием, так как, по сути, мы задаем высоту строки в соответствии с высотой блока, использовав свойство line-height .
первый пример. демо №1
Точно таким же способом возможно реализовать картинку по центру вертикали, но добавив одно новое свойство vertical-align: middle; .
Выравнивание со свойством position
Этот метод широко используется во многих задачах CSS, не исключая и нашей поставленной задачки. Но следует отметить, что он не полностью совершенен и имеет свои побочные эффекты. Это связано с тем, что центрирование элемента, задаваемое в процентах, будет центрироваться по левому верхнему краю внутреннего блока.
Поэтому нужно задать отрицательное значение к внешним отступам. Размер отступа сверху должен соответствовать половине высоты внутреннего блока, а отступ слева — на половину ширины. Таким образом, получим абсолютный центр.
В этом варианте, пожалуй, обязательно знать точную высоту и ширину дочернего элемента. Иначе, может возникнуть некорректность центрирования.
Выравнивание со свойством table
Здесь используем старую технику, превратив элементы в таблицу с ячейками.
При этом теги таблицы
Казалось бы, используя его можно решить все проблемы. Но не тут-то было.
Доля браузера IE7 на моем сайте, по статистике за 1 квартал 2013 года, следующая:
Они подходят для большинства случаев.Центр выравнивания HTML | Как создать Align Center в HTML с примерами
Тег
В HTML эти теги будут использовать все версии, кроме Html5, вместо того, чтобы стиль CSS имел свойство выравнивать элементы по центру. В HTML у нас есть другой набор функций для выделения и привлекательности для пользователя на веб-страницах/веб-сайтах из-за некоторых выравниваний, таких как размер шрифта, цвета, границы, выравнивание строки меню, полосы прокрутки, панели навигации и т. д. функции для HTML, чтобы использовать веб-страницы более привлекательными.Синтаксис:
Мы уже говорили, что все теги HTML имеют различный набор синтаксиса для использования веб-страниц в процедурах HTML dtd, потому что HTML имеет предварительно определенные теги для использования требований клиента для полной успешно заполнил проекты. Основываясь на этом, тег
<тело> <центр> -----Некоторые коды---
Приведенный выше код является основным синтаксисом, когда мы используем его для создания веб-страниц, если данные должны быть выровнены по центру веб-страницы.
В HTML мы используем тег
Как создать центр выравнивания в HTML?
В HTML у нас есть только или несколько блоков, содержащих некоторые тексты или значения, которые нужно выровнять по центру, будет использоваться тег
, потому что мы использовали для выравнивания значений абзаца по центральному положению, и мы даем значение свойства, такое как «text-align=center», мы можем установить значения для атрибутов только тогда указанный элемент должен располагаться по центру.
Тег
…
будут использовать для каждого набора тегов, представленных в формате абзаца; если мы не можем использовать другие наборы тегов, чтобы не быть в центре, мы можем использовать класс