Вы можете выровнять изображение по вертикали по центру внутри <div>, используя CSS-свойство vertical-align в сочетании с display: table-cell; для содержащего элемента div. Кроме того, поскольку CSS-свойство margin не применимо к элементам с display: table-cell;, поэтому мы обернули содержащий div другой div.outer-wrapper и применили к нему margin. Это решение будет работать даже для изображений с большей…
CSS Примеры
Если вы попытаетесь установить высоту контейнера <div> на 100% от окна браузера, используя правило height: 100%; оно не сработает, потому что процент (%) — это относительная единица, которая зависит от высоты родительского элемента. Для решения вашей задачи необходимо установить 100% высоту и для родительских элементов. Например, рассмотрим следующий пример, div.container имеет два родительских элемента: <body>…
Вы можете просто использовать CSS-свойство background-image в сочетании с псевдоклассом :hover для замены или изменения изображения при наведении курсора мыши. Посмотрим следующий пример, чтобы понять, как это работает: Вы также можете объединить изображения в спрайт изображения для плавного эффекта наведения. Однако, если вы хотите добиться этого эффекта с помощью тега <img>, вы должны использовать метод…
Если вы просто хотите отображать и скрывать раскрывающееся меню при наведении курсора мыши, вам не нужен JavaScript. Вы можете сделать это, просто используя CSS-свойство display и псевдокласс :hover. В следующем примере показано, как реализовать простое раскрывающееся меню с помощью CSS. И с семантической и практической точки зрения это не самое удачное решение. Во-первых, пользователь захочет…
Вы можете использовать CSS-свойство position в сочетании со свойством z-index для наложения одного <div> поверх другого элемента <div>. Свойство z-index определяет порядок наложения позиционированных элементов (т. е. элементов, значение position которых является absolute, fixed, или relative). Давайте посмотрим следующий пример, чтобы понять, как это работает: В приведенном выше примере элемент div с классом .stack-top будет…
Вы можете просто использовать CSS-свойство pointer-events, чтобы отключить поведение ссылки по умолчанию. Значение none этого свойства указывает, что элемент никогда не является целью событий указателя. Давайте посмотрим следующий пример, чтобы понять, как это работает: Свойство pointer-events поддерживается во всех основных браузерах, таких как Chrome, Firefox, Safari, IE11 + и т. д. В качестве альтернативы вы…
Если вы примените border для элемента при наведении курсора мыши, он «раздвинет» окружающие элементы. Однако, используя отрицательное значение CSS-свойства margin, вы можете сделать это не затрагивая другие элементы или контент. Давайте посмотрим пример, чтобы понять, как это в основном работает: В качестве альтернативы вы можете установить border с той же шириной и значением цвета transparent…
Если вы попытаетесь поместить изображение в элемент <div>, имеющий границы, вы увидите лишнее белое пространство (около 3px) внизу изображения. Это происходит потому, что изображение является строчным элементом, поэтому браузер добавляет некоторые пробелы под базовой линией. Самый простой способ избавиться от этой проблемы — изменить отображаемое значение изображения по умолчанию со строчного на блочное, т.е. применить…
Вы можете легко создать липкий или фиксированный <header> или <footer>, используя фиксированное позиционирование CSS. Просто примените CSS-свойство position с фиксированным значением в сочетании со свойством top и bottom, чтобы разместить элемент соответственно вверху или внизу области просмотра. Давайте посмотрим на следующий пример, чтобы понять, как это работает:
Если вы попытаетесь выровнять текст по вертикали по центру внутри div, используя CSS-правило vertical-align: middle;, оно у вас не сработает. Предположим, у вас есть элемент div высотой 50px, и вы поместили в него ссылку, которую хотите выровнять по вертикали по центру. Самый простой способ сделать это — просто применить свойство line-height со значением, равным высоте…
Если вы хотите нарисовать границы внутри прямоугольного блока, есть очень простое решение — просто используйте CSS-свойство outline вместо border и переместите его внутри рамки элемента, используя свойство CSS3 outline-offset с отрицательным значением. Однако это решение не подойдет для элементов со скругленными углами. Но вы все равно можете рисовать границы внутри круглого прямоугольника или элемента с…
При создании фотогалереи или чего-то подобного вам может потребоваться разместить текст или описание поверх изображения. Вы можете использовать методы абсолютного позиционирования в сочетании со свойством margin для позиционирования или размещения текста поверх изображения (т. е. элемента <img>). Давайте посмотрим на следующий пример, чтобы понять, как это работает: