Как карточки выстроить по горизонтали в css
Перейти к содержимому

Как карточки выстроить по горизонтали в css

  • автор:

Как разместить элементы списка горизонтально?

Вывести маркированный список в одну строку и убрать отображение маркеров.

Решение

Элементы списка по умолчанию выстраиваются вертикально друг под другом, но иногда требуется разместить их по горизонтали, например, для создания различных меню. В таком случае к селектору LI следует добавить стилевое свойство display со значением inline , оно преобразует блочный элемент в строчный (пример 1).

Пример 1. Горизонтальный список

HTML5 CSS 2.1 IE Cr Op Sa Fx

Результат данного примера показан на рис. 1.

Горизонтальный список

Рис. 1. Горизонтальный список

Из-за того, что вокруг списка автоматически добавляются отступы, их следует изменить, добавляя свойства margin и padding к селектору UL , как показано в примере.

HTML по теме

CSS по теме

Не выкладывайте свой код напрямую в комментариях, он отображается некорректно. Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.

Популярные рецепты

  • Как добавить картинку на веб-страницу?
  • Как добавить иконку сайта в адресную строку браузера?
  • Как добавить фоновый рисунок на веб-страницу?
  • Как сделать обтекание картинки текстом?
  • Как растянуть фон на всю ширину окна?
  • Как выровнять фотографию по центру веб-страницы?
  • Как разместить элементы списка горизонтально?
  • Как убрать подчеркивание у ссылок?
  • Как убрать маркеры в маркированном списке?
  • Как изменить расстояние между строками текста?
  • Как сделать, чтобы картинка менялась при наведении на нее курсора мыши?
  • Как открыть ссылку в новом окне?

Выравнивание элементов по главной оси — CSS: Основы Flex

Одна из главных «фишек» Flex — автоматический расчет расстояния между блоками. Давайте представим типичную верстку списка карточек товара в интернет-магазине.

В данном случае между карточками расстояние по 20 пикселей по горизонтали и вертикали. Попробуем воспроизвести такую структуру, используя свойство float, и посмотрим, с какими трудностями мы столкнемся.

Мы намеренно убрали весь текст, чтобы вы могли лучше увидеть расположение элементов без перехода на сайт CodePen. Обратите внимание, что для указания расстояния между карточками приходится использовать свойство margin, которое будет распространено на все элементы, и мы получим ненужный отступ справа у последней карточки, хотя его быть не должно. Эта проблема повредила нервы не одному поколению разработчиков. Они пытались выкрутиться самыми разными способами: использовали JavaScript; вручную выставляли класс, который отменит отступ; применяли псевдокласс :nth-child, причем он появился только в стандарте CSS3.

С использованием Flex данная задача решается одним простым правилом justify-content, которое может принимать одно из следующих основных значений:

все изменения производятся в классе .container

  • center. Все элементы помещаются в центре. Перенесем нашу верстку во флекс-контейнер и выставим свойство justify-content. Для наглядности у body стоит серый фон, а у контейнера белый. Также во второй строке уменьшилось количество элементов для визуальной наглядности работы свойств. Обратите внимание, что элементы во второй строке расположились в центре, сохранив те же отступы между собой, как и в первой строке.
  • flex-start. Элементы начинают располагаться с начала контейнера.
  • flex-end. Элементы начинают располагаться с конца контейнера.
  • space-between. При этом значении элементы выстраиваются автоматически. Первый элемент строки становится в начало контейнера, последний в конец. Остальные элементы равномерно занимают пустое пространство. В данном случае все отступы по главной оси высчитываются автоматически.
  • space-around. Более хитрое значение. Элементы, так же, как и при space-between, автоматически получают равное расстояние между соседями. При этом отступы появляются и в начале/конце флекс-контейнера. Эти отступы будут равны половине отступа между элементами.
  • space-evenly. Последнее правило, которое устанавливает одинаковые отступы со всех сторон у всех элементов в строке. В отличие от space-around первый отступ слева и последний справа будет равен не половине отступа между элементами, а полному.

Данные свойства помогут вам полноценно управлять отступами между элементами внутри флекс-контейнера и в любой момент изменять поведение с помощью смены всего одного значения, что очень удобно при создании адаптивных сайтов.

Выравнивание по поперечной оси

Для выравнивания по поперечной оси существует свойство align-items. Оно принимает следующие значения:

Самостоятельное задание

Создайте контейнер с несколькими элементами внутри и поставьте ему свойство flex-direction отличное от стандартного. Попробуйте использовать свойство justify-content, чтобы увидеть, как оно заработает. Данная трансформация свойства может быть вначале немного непонятна, но в реальном проекте это очень хороший способ работы с выравниванием блоков.

Открыть доступ

Курсы программирования для новичков и опытных разработчиков. Начните обучение бесплатно

  • 130 курсов, 2000+ часов теории
  • 1000 практических заданий в браузере
  • 360 000 студентов

Наши выпускники работают в компаниях:

Центрирование горизонтальное и вертикальное

В CSS есть всего несколько техник центрирования элементов. Если их знать, то большинство задач решаются просто.

Горизонтальное

text-align

Для центрирования инлайновых элементов – достаточно поставить родителю text-align: center :

 .outer 

Для центрирования блока это уже не подойдёт, свойство просто не подействует. Например:

 .outer < text-align: center; border: 1px solid blue; >.inner 

margin: auto

Блок по горизонтали центрируется margin: auto :

 .outer < border: 1px solid blue; >.inner 

В отличие от width/height , значение auto для margin само не появляется. Обычно margin равно конкретной величине для элемента, например 0 для DIV . Нужно поставить его явно.

Значение margin-left:auto/margin-right:auto заставляет браузер выделять под margin всё доступное сбоку пространство. А если и то и другое auto , то слева и справа будет одинаковый отступ, таким образом элемент окажется в середине. Детали вычислений описаны в разделе спецификации Calculating widths and margins.

Вертикальное

Для горизонтального центрирования всё просто. Вертикальное же изначально не было предусмотрено в спецификации CSS и по сей день вызывает ряд проблем.

Есть три основных решения.

position:absolute + margin

Центрируемый элемент позиционируем абсолютно и опускаем до середины по вертикали при помощи top:50% :

 .outer < position: relative; height: 5em; border: 1px solid blue; >.inner 

Это, конечно, не совсем центр. По центру находится верхняя граница. Нужно ещё приподнять элемент на половину своей высоты.

Высота центрируемого элемента должна быть известна. Родитель может иметь любую высоту.

Если мы знаем, что это ровно одна строка, то её высота равна line-height .

Приподнимем элемент на пол-высоты при помощи margin-top :

 .outer < position: relative; height: 5em; border: 1px solid blue; >.inner 
Почему -0.625em ?

При стандартных настройках браузера высота строки line-height: 1.25 , если поделить на два 1.25em / 2 = 0.625em .

Конечно, высота может быть и другой, главное чтобы мы её знали заранее.

Можно аналогично центрировать и по горизонтали, если известен горизонтальный размер, при помощи left:50% и отрицательного margin-left .

Одна строка: line-height

Вертикально отцентрировать одну строку в элементе с известной высотой height можно, указав эту высоту в свойстве line-height :

 .outer 
Текст

Это работает, но лишь до тех пор, пока строка одна, а если содержимое вдруг переносится на другую строку, то начинает выглядеть довольно уродливо.

Таблица с vertical-align

У свойства vertical-align, которое управляет вертикальным расположением элемента, есть два режима работы.

В таблицах свойство vertical-align указывает расположение содержимого ячейки.

Его возможные значения:

baseline Значение по умолчанию. middle , top , bottom Располагать содержимое посередине, вверху, внизу ячейки.

Например, ниже есть таблица со всеми 3-мя значениями:

 table < border-collapse: collapse; >td 
top middle bottom

Обратим внимание, что в ячейке с vertical-align: middle содержимое находится по центру. Таким образом, можно обернуть нужный элемент в таблицу размера width:100%;height:100% с одной ячейкой, у которой указать vertical-align:middle , и он будет отцентрирован.

Но мы рассмотрим более красивый способ, который поддерживается во всех современных браузерах, и в IE8+. В них не обязательно делать таблицу, так как доступно значение display:table-cell . Для элемента с таким display используются те же алгоритмы вычисления ширины и центрирования, что и в TD . И, в том числе, работает vertical-align :

 

Этот способ замечателен тем, что он не требует знания высоты элементов.

Однако у него есть особенность. Вместе с vertical-align родительский блок получает табличный алгоритм вычисления ширины и начинает подстраиваться под содержимое. Это не всегда желательно.

Чтобы его растянуть, нужно указать width явно, например: 300px :

 

Можно и в процентах, но в примере выше они не сработают, потому что структура таблицы «сломана» – ячейка есть, а собственно таблицы-то нет.

Это можно починить, завернув «псевдоячейку» в элемент с display:table , которому и поставим ширину:

 

Если дополнительно нужно горизонтальное центрирование – оно обеспечивается другими средствами, например margin: 0 auto для блочных элементов или text-align:center на родителе – для других.

Центрирование в строке с vertical-align

Для инлайновых элементов ( display:inline/inline-block ), включая картинки, свойство vertical-align центрирует сам инлайн-элемент в окружающем его тексте.

В этом случае набор значений несколько другой:

Это можно использовать и для центрирования, если высота родителя известна, а центрируемого элемента – нет.

Допустим, высота внешнего элемента 120px . Укажем её в свойстве line-height :

  

Работает во всех браузерах и IE8+.

Свойство line-height наследуется, поэтому надо знать «правильную» высоту строки и переопределять её для inner .

Центрирование с vertical-align без таблиц

Если центрирование должно работать для любой высоты родителя и центрируемого элемента, то обычно используют таблицы или display:table-cell с vertical-align .

Если центрируются не-блочные элементы, например inline или inline-block , то vertical-align может решить задачу без всяких таблиц. Правда, понадобится вспомогательный элемент (можно через :before ).

 .before < display: inline-block; height: 100%; vertical-align: middle; >.inner 
Центрированный
Элемент
  • Перед центрируемым элементом помещается вспомогательный инлайн-блок before , занимающий всю возможную высоту.
  • Центрируемый блок выровнен по его середине.

Для всех современных браузеров и IE8 можно добавить вспомогательный элемент через :before :

 .outer:before < content: ''; display: inline-block; height: 100%; vertical-align: middle; >.inner < display: inline-block; vertical-align: middle; >/* добавим горизонтальное центрирование */ .outer 
Центрированный
Элемент

В пример выше добавлено также горизонтальное центрирование text-align: center . Но вы можете видеть, что на самом деле внутренний элемент не центрирован горизонтально, он немного сдвинут вправо.

Это происходит потому, что центрируется весь текст, а перед inner находится пробел, который занимает место.

  1. Убрать лишний пробел между div и началом inner , будет .
  2. Оставить пробел, но сделать отрицательный margin-left у inner , равный размеру пробела, чтобы inner сместился левее.
 .outer:before < content: ''; display: inline-block; height: 100%; vertical-align: middle; >.inner < display: inline-block; vertical-align: middle; margin-left: -0.35em; >.outer 
Центрированный
Элемент

Центрирование с использованием модели flexbox

Данный метод поддерживается всеми современными браузерами.

  
Центрированный
Элемент
  • Не требуется знания высоты центрируемого элемента.
  • CSS чистый, короткий и не требует дополнительных элементов.
  • Не поддерживается IE9-, IE10 поддерживает предыдущую версию flexbox.

Итого

Обобщим решения, которые обсуждались в этой статье.

Для горизонтального центрирования:

  • text-align: center – центрирует инлайн-элементы в блоке.
  • margin: 0 auto – центрирует блок внутри родителя. У блока должна быть указана ширина.

Для вертикального центрирования одного блока внутри другого:

Если размер центрируемого элемента известен, а родителя – нет

Родителю position:relative , потомку position:absolute; top:50% и margin-top:- . Аналогично можно отцентрировать и по горизонтали.

Если нужно отцентрировать одну строку в блоке, высота которого известна

Поставить блоку line-height: . Нужны конкретные единицы высоты ( px , em …). Значение line-height:100% не будет работать, т.к. проценты берутся не от высоты блока, а от текущей line-height .

Высота родителя известна, а центрируемого элемента – нет.

Поставить line-height родителю во всю его высоту, а потомку поставить display:inline-block .

Высота обоих элементов неизвестна.

  1. Сделать элемент-родитель ячейкой таблицы при помощи display:table-cell (IE8) или реальной таблицы, и поставить ему vertical-align:middle . Отлично работает, но мы имеем дело с таблицей вместо обычного блока.
  1. Решение со вспомогательным элементом outer:before и инлайн-блоками. Вполне универсально и не создаёт таблицу.
  2. Решение с использованием flexbox.

Варианты горизонтального выравнивания блоков и картинок по центру справа слева

горизонтального выравнивания блоков и картинок

Часто головной болью начинающих веб-мастеров является корректное выравнивание картинок или блоков по горизонтали и их адаптивное поведение при разных расширениях экрана.

Как выравнять картинку по горизонтали: справа, слева, по центру?

Из указанной ниже информации следует вывод: чтобы выровнять картинку справа, слева, по центру, её необходимо поместить в блок DIV, а затем продолжать работу с этим блоком. Это современный подход к проблеме, когда набрал обороты блочный вид вёрстки контента.

Проблема выравнивания и адаптивности изображения к любому разрешению экрана пропадает сама по себе, когда вы используете фреймворки типа Bootstrap.

В обычной практике используется несколько вариантов выравнивания элементов в один ряд по горизонтали. Наиболее часто используются методы:
- Float;
- Inline-block;
- Table-cell (устаревший после выхода HTML5).

Каждый из них имеет свои недостатки и преимущества. Рассмотрим 2 варианта: Float и Inline-block.

Вариант с использованием Float

Стиль Float используется при блочной вёрстке.
Любой блочный элемент будет размещаться с новой строки не зависимо от присвоенной ему ширины. Даже если уменьшать размер блока div по ширине блоки в один ряд не встанут.

Здесь на помощь придёт Float: left или right.
Он делает блочный элемент плавающим и выравнивает его по левому или правому краю основного блока. Также Float способствует обтеканию элемента текстом.

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

Значения стиля в файле CSS:

.block { float: left; /* обтекание */ line-height: 60px; /* Высота строки и центровка по вертикали */ width: 180px; /* ширина блока */ text-align: center; /* текст по центру */ font-size: 22px; background: #5F4BE3; color: white; margin-top: 60px; margin-right: 10px; >

Получает результат, который вы видите на картинках ниже.

выравнивания блоков

При отсутствии float: left;

выравнивания блоков слева

С размещенным float: left;

При уменьшении экрана, когда блоки благодаря своему размеру width: 180px; перестанут умещаться в одну линию, они начнут складываться друг под друга.

выравнивания блоков справа

Этот же пример с использованием float: right;

Как видите блоки (судя по тексту в них) поменяли порядок размещения. Браузер обработал их сверху вниз и выровнял по правому краю, соблюдая очерёдность - сначала выравнял первый, потом второй и т.д. При работе со свойством float: right; имейте это ввиду.

Для прерывания действия свойства обтекания элементов используется конструкция:

В примерах выше расстояния между блоками задаются при помощи отступа margin-right.
Допустим нам необходимо разместить блоки в один ряд по центру и задать отступы между ними.

В этом случае поступаем так:

CSS код:

.content { width: 750px; /* фиксируем ширину родительского блока */ margin: 0 auto; /* центрируем родительский блок */ background: #FFFFCC; height: 60px; /* Высота родителя */ > .block { float: left; /* Задаем обтекание */ line-height: 60px;/* Высота строки и центровка по вертикали */ width: 180px; /* ширина блока */ text-align: center; /* текст по центру */ font-size: 22px; background: #5F4BE3; color: white; margin-right: 10px; > .content :last-child { margin-right: 0px; /* Убираем последнее правое поле* / >

Результат:

выравнивания блоков по центру

На практике могут встретиться различные ситуации, но всех особенностей в одной статье не рассмотреть.

Метод «Inline-block»

Как уже говорилось, блочные и строчные элементы имеют свои недостатки и преимущества в зависимости от поставленной задачи. Возьмём только преимущества и попробуем их объединить. Для этого знакомимся со свойством display: inline-block.

Свойство display: inline-block создаёт блочно-строчный элемент, который можно расценивать как строчный, с сохранением блочных свойств. Он позволяет изменять линейные параметры, задавая отступы, поля и т.п.

Свойства блочно-строчного элемента:
- ширина и высота блока определяется автоматически, в зависимости от содержимого и присутствия отступов padding.
- ширину и высоту блока можно задать фиксировано.
- эффект свёртывания границ отсутствует.

Приведу пример простого меню с картинкой и текстовой ссылкой с использованием блочно-строчного элемента.

Ссылка меню 1 длиннее обычного

Ссылка меню 2

Ссылка меню 3

Ссылка меню 4

.content2 { width: 750px; /* фиксируем ширину родительского блока. Если задать 100%, то будут складываться при сужении экрана */ margin: 0 auto; /* центрируем родительский блок */ height: 60px; /* Высота родителя */ > .menu { display: inline-block; /* блочно-строчное отображение */ width: 120px; /* ширина отдельного блока */ vertical-align: top; /* текст меню выравниваем по верху */ > .string a{ text-align: center; /* текст по гориз. центру */ background: #5F4BE3; color: white; text-decoration: none; padding: 3px; >

В результате получили следующее:

выравнивания блоков по центру

Напоминаю: перед тем как работать с выравниваем картинки по горизонтали, её необходимо поместить в блок DIV.

Скачайте пример страницы с указанными выше HTML CSS кодами для практических экспериментов - скачать: Example_Horizontal_Alignment.rar [15,36 Kb] (cкачиваний: 50)

Сайт-визитка с Админкой

Галерея фото и видео, обратная связь

Автор: Саков | Просмотров: 8 144 | 2019-10-18

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *