Как выровнять блоки по горизонтали
Нужно, чтобы второй блок был на ровне с первым, а получается вот так
Отслеживать
задан 18 дек 2020 в 11:39
51 3 3 бронзовых знака
какие блоки, пишите более подробный вопрос?
18 дек 2020 в 11:55
Блоки plate и karen
18 дек 2020 в 12:03
@Prohor072 а что в итоге вы хотите, чтобы получилось? приложите картинку
18 дек 2020 в 13:20
Отредактировал вопрос
18 дек 2020 в 13:36
@Prohor072 я бы это слово sorry с тарелкой сделал бы просто картинкой, а не словами
18 дек 2020 в 14:37
1 ответ 1
Сортировка: Сброс на вариант по умолчанию
Вы забыли к классу .authors добавить свойство display: flex.
Я закоментировала некоторые свойства за ненадобностью в этом примере.
Очень удобно эксперементировать с расположением элементов вот в этой flex-песочнице — https://demos.scotch.io/visual-guide-to-css3-flexbox-flexbox-playground/demos/.
.authors < background-color: cadetblue; height: 600px; display: flex; // ВОТ ЭТО СВОЙСТВО УПРАВЛЯЕТ РАСПОЛОЖЕНИЕМ ФЛЕХ-ДЕТЕЙ justify-content: space-between; >.plate < background-image: url(../images/plate.png); background-repeat: no-repeat; /* align-items: center; justify-content: center; */ margin-top: 86px; height: 540px; /* margin-left: 157px; margin-right: 1100px; */ >.plate h2 < padding-top: 160px; margin-left: 240px; font-size: 34px; font-family: "Josefin Sans Light", arial; >.plate a < color: #a9a9a9; margin-top: 10px; margin-left: 220px; display: block; line-break: auto; >.karen < background-image: url(../images/karen.png); background-repeat: no-repeat; align-items: center; justify-content: center; /* margin-top: 86px; */ height: 540px; /* margin-left: 1100px; margin-right: 157px; */ margin: 25px; box-shadow: 0px 0px 10px 0.3px grey; background-color: #fff; >.fail < padding-top: 20px; margin-right: 165px; margin-left: 50.5px; >.fail_text < font-size: 18px; >.plate_button
404 Sorry
WE COULDN’T
FIND THE PAGE
:( Привет
Как выровнять div по горизонтали?
@ShuklinAlexey, какие блоки, уточняйте? А лучше сразу вопрос правильно сформулировать, что Вам нужно и что не получается!
6 ноя 2016 в 14:30
подскажите, как в данном случае поставить блок .call вслед за блоком .logo (что бы в одной строке находились)
6 ноя 2016 в 14:37
@ShuklinAlexey, поправила код. так или опять не то?)
6 ноя 2016 в 14:44
спасибо, то что нужно)
6 ноя 2016 в 14:51
margin:0 auto;
#test
#test
#dop-block < position: relative; float: right; right: 50%; >#block
Отслеживать
ответ дан 6 ноя 2016 в 14:26
4utka_pyan 4utka_pyan
158 4 4 бронзовых знака
- css
- вёрстка
- html
Важное на Мете
Похожие
Подписаться на ленту
Лента вопроса
Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.
Дизайн сайта / логотип © 2023 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2023.11.15.1019
Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.
Горизонтальное и вертикальное выравнивание элементов
Выравнивание элементов по горизонтали и вертикали можно сделать различными способами. Выбор способа зависит от типа элемента (блочный или строчный), от типа его позиционирования, размеров и т.д.
1. Горизонтальное выравнивание по центру блока/страницы
1.1. Если для блока задана ширина:
Если нужно выровнять строчный элемент таким способом, ему нужно задать display: block;
1.2. Если блок вложен в другой блок и для него не задана/задана ширина:
.wrapper
1.3. Если для блока задана ширина и его нужно зафиксировать по центру родительского блока:
.wrapper .box < width: 400px; position: absolute; left: 50%; margin-left: -200px; /*смещаем блок влево на расстояние, равное половине его ширины*/ >
1.4. Если для блоков не задана ширина, можно центрировать с помощью родительского блока-обертки:
.wrapper .box < display: inline-block; /*располагаем блоки в ряд по горизонтали*/ margin-right: -0.25em; /*убираем правый отступ между блоками*/ >
2. Вертикальное выравнивание
2.1. Если текст занимает одну строчку, например, для кнопок и пунктов меню:
.button
2.2. Для выравнивания блока по вертикали внутри родительского блока:
.wrapper .box
2.3. Вертикальное выравнивание по типу таблицы:
.wrapper < display: table; width: 100%; >.box
2.4. Если для блока задана ширина и высота, и его нужно выровнять по центру родительского блока:
.wrapper < position: relative; >.box < height: 100px; width: 100px; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; overflow: auto; /*чтобы контент не расползался*/ >
2.5. Абсолютное позиционирование по центру страницы/блока с помощью CSS3-трансформации:
если для элемента заданы размеры
если для элемента не заданы размеры и он не пустой
Some text here
Выравнивание текста в HTML с применением стилей CSS
Разрабатывая сайты, не раз сталкиваешься с однотипными задачами по типу выравнивание текста по горизонтали, и более сложной, как выровнять текст или блок по вертикали.
Вариантов решить задачу предостаточно, но в данной статье, я собрал наиболее понравившиеся с применением HTML и стилей CSS.
- Выравнивание текста по горизонтали HTML & CSS:
- Выровнять текст по правому краю тегом «text-aling:right;»;
- Выровнять текст по левому краю тегом «text-aling:left;»;
- Выравнивание текста по центру тегом «text-aling:center;»;
- Как выровнять текст по ширине тегом «text-aling:justify;»;
- Выравнивание таблицы созданной в HTML;
- Выравнивание блока «div» по центру используя CSS.
-
- Вертикальное центрирование текста с помощью тега «line-height»;
- Выравнивание блока по вертикали внутри родительского блока с применением отрицательного «margin»;
- Вертикальное выравнивание по типу таблицы;
- Вертикальное выравнивание блока тегом «transform»;
- Выравнивание по вертикали с использованием «display:flex».
Выравнивание текста по горизонтали HTML & CSS
Когда я начинал изучать HTML, чтобы выровнять текст по горизонтали, нужно было обернуть объект в тег , а если по правому или левому краю, то
или
соответственно.
С приходом стилей CSS, подобные теги уже уходят в архив и если и применяются, то в крайне исключительных случаях.
Выровнять текст по правому краю тегом «text-aling:right;»
Данный текст будет выровнен по правому краю.
#wrapper < border:1px solid #000; width:500px; >p
Выровнять текст по левому краю тегом «text-aling:left;»
По умолчанию, текст изначально выровнен по левому краю, но иногда приходится явно указывать это.
Код HTML:
Данный текст будет выровнен по левому краю.
#wrapper < border:1px solid #000; width:500px; >p
Выравнивание текста по центру тегом «text-aling:center;»
Если хотим сделать какой то заголовок, который должен располагаться по центру, используем следующий вариант:
Заголовок, который будет по центру
Какой то текст в статье, размещаемый на вашем сайте. Какой то текст в статье, размещаемый на вашем сайте. Какой то текст в статье, размещаемый на вашем сайте. Какой то текст в статье, размещаемый на вашем сайте. Какой то текст в статье, размещаемый на вашем сайте.
#wrapper < border:1px solid #000; width:500px; >h1 p
Как выровнять текст по ширине тегом «text-aling:justify;»
Одно время было принято размещать текст в статье по всей ширине страницы. Если углубиться в вопрос, то достигается это при помощи увеличения пробелов между словами, а в CSS при помощи text-aling:justify; .
Заголовок, который будет по центру
Какой то текст в статье, размещаемый на вашем сайте. Какой то текст в статье, размещаемый на вашем сайте. Какой то текст в статье, размещаемый на вашем сайте. Какой то текст в статье, размещаемый на вашем сайте. Какой то текст в статье, размещаемый на вашем сайте.
#wrapper < border:1px solid #000; width:500px; >h1 p
Выравнивание таблицы созданной в HTML
Рассмотрим ситуацию, в которой нужно центрировать созданную в HTML таблицу на экране или внутри блока. Отличный способ использовать margin: 10px auto; . Тем самым мы говорим, что сверху и снизу должен быть отступ 10px, а по краям, рассчитывается автоматически, поэтому таблица располагается по центру.
№ п/п Фамилия Расход Приход 1 Иванов 3 540 руб. 10 084 руб. 2 Петров 1 730 руб. 8 294 руб. 3 Сидоров 6 890 руб. 12 244 руб.
#wrapper < border:1px solid #000; width:500px; >table
Теперь обратимся к ячейкам таблицы и расположим текст для наглядности по разным краям.
И снова, можно прописать для каждой ячейки
Текст по центру ячейки
, где
- valign=»center» — выравнивание по вертикали,
- align=»center» — выравнивание по горизонтали,
но что делать, если появилась необходимость изменить дизайн. Заново переписывать каждый пункт? Поэтому снова воспользуемся CSS и присвоим классы к ячейкам.
Как выровнять текст в таблице по правому краю
№ п/п Фамилия Расход Приход 1 Иванов 3 540 руб. 10 084 руб. 2 Петров 1 730 руб. 8 294 руб. 3 Сидоров 6 890 руб. 12 244 руб.
#wrapper < border:1px solid #000; width:600px; >table .center, .left, .right, .justify .center, .left, .right, .justify
Как выровнять текст в таблице по левому краю
№ п/п Фамилия Расход Приход 1 Иванов 3 540 руб. 10 084 руб. 2 Петров 1 730 руб. 8 294 руб. 3 Сидоров 6 890 руб. 12 244 руб.
#wrapper < border:1px solid #000; width:600px; >table .center, .left, .right, .justify .center, .left, .right, .justify
Как выровнять текст в таблице по ширине
№ п/п Фамилия Расход Приход 1 Иванов 3 540 руб. 10 084 руб. 2 Петров 1 730 руб. 8 294 руб. 3 Сидоров 6 890 руб. 12 244 руб.
#wrapper < border:1px solid #000; width:600px; >table .center, .left, .right, .justify .center, .left, .right, .justify
Как выровнять текст в таблице по центру
№ п/п Фамилия Расход Приход 1 Иванов 3 540 руб. 10 084 руб. 2 Петров 1 730 руб. 8 294 руб. 3 Сидоров 6 890 руб. 12 244 руб.
#wrapper < border:1px solid #000; width:600px; >table .center, .left, .right, .justify .center, .left, .right, .justify
Выравнивание блока «div» по центру используя CSS
Рассмотрим несколько вариантов выравнивания блока div относительно родительского блока.
В ситуации, когда дочерний блок div не имеет размеров, достаточно сделать так:
Этот блок расположен по центру
#wrapper < border:1px solid #000; width:600px; text-align:center; >.box
Это самый простой случай. В практике такое встречается, но не так часто как рассмотренные ниже примеры.
Как выровнять блок «div» определенной ширины
Предположим, у нас есть дочерний блок div с установленной шириной. В этом случае, самый простой способ центрировать блок, задать ему margin: auto , рассмотренный ранее.
Этот блок расположен по центру
#wrapper < border:1px solid #000; width:600px; text-align:center; >.box
Как выровнять внутренний блок «div»
Еще один способ, использовать относительное позиционирование.
Этот блок расположен по центру
#wrapper < border:1px solid #000; width:600px; position: relative; >.box
Как выровнять несколько блоков «div» относительно родительского
Создадим нечто менюшки на сайте. В этом случае, у нас будет несколько блоков div , которые нужно будет центрировать относительно родительского блока.
Главная HTML & CSS PHP JavaScript
#wrapper < width: 600px; text-align: center; >.main, .htmlcss, .PHP, .js
Вариантов применения может быть масса, но для общего понимания происходящего и неплохих начальных знаний чтобы сделать выравнивание и текста и блоков по горизонтали, считаю информации достаточно.
Выравнивание текста по вертикали HTML & CSS
Куда большую проблему, особенно для начинающих, доставляет необходимость вертикального выравнивания тексте. Необходимость выровнять текст по вертикали, в верстке встречается при:
- создании различных дизайнов кнопок;
- выравнивании разной величины блоков находящихся на одной линии;
- вертикальное выравнивание текстов, с разным количеством строчке;
- и еще в 100500 случаях.
Ниже приведу самые распространенные способы для центрирования по вертикали, ознакомьтесь и выберите наиболее подходящий в вашем случае.
Вертикальное центрирование текста с помощью тега «line-height»
Приведу пример создания кнопки стилями CSS.
Скачать
#wrapper < >.button < background-color: #FFFFFF; border: 1px solid #CCCCCC; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset; transition: border 0.2s linear 0s, box-shadow 0.2s linear 0s; border-radius: 4px; color: #555555; width:120px; margin: 20px auto; font-size: 14px; text-align:center; height: 40px; line-height: 40px; >.button:hover, a.button:focus
Самые главные строчки, которые изучаем в данном примере, это height: 40px; и line-height: 40px; . Height, это высота кнопки, а тег line-height , указывает на межстрочный интервал сверху и снизу. В результате, название кнопки располагается по центру.
Выравнивание блока по вертикали внутри родительского блока с применением отрицательного «margin»
В том случае, если высота родительского блока известна, может помочь следующая вариация.
Какой то длинный текст в этом блоке. Какой то длинный текст в этом блоке. Какой то длинный текст в этом блоке. Какой то длинный текст в этом блоке.
#wrapper < background: #f09d06; height: 300px; margin: 20px; width: 300px; position: relative; resize: vertical; overflow: auto; >.content
Вертикальное выравнивание по типу таблицы
Какой то длинный текст в этом блоке. Какой то длинный текст в этом блоке.
#wrapper < display: table; >.content
Вертикальное выравнивание блока тегом «transform»
В том случае если не известен размер родительского блока, можно сделать такой трюк:
Какой то длинный текст в этом блоке. Какой то длинный текст в этом блоке. Какой то длинный текст в этом блоке. Какой то длинный текст в этом блоке.
#wrapper < background: #f09d06; height: 300px; margin: 20px; width: 300px; position: relative; >.content
Выравнивание по вертикали с использованием «display:flex»
На сегодняшний день, самый лучший способ центрирования текста по вертикали в CSS, использование flex-верстки. Все что нужно сделать, это задать родительскому блоку тег display: flex и указать свойства align-items и justify-items .
Какой то длинный текст в этом блоке. Какой то длинный текст в этом блоке.
#wrapper < background: #f09d06; height: 300px; margin: 20px; width: 300px; display: flex; justify-content: center; align-items: center; >.content
Теперь вы знаете как выровнять текст в CSS. Материал получился объемный, но зато очень полезный. Выравнивание текста и блоков посредством CSS, первостепенные знания, без которых не получится адекватно сверстать сайт.
Если вы знаете иные способы, пишите в комментариях, буду рад поучиться.
Предыдущая запись