ZorNet.Ru — сайт для вебмастера » HTML и CSS » Выровнять картинку по вертикали на чистом CSS

Выровнять картинку по вертикали на чистом CSS

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

Так как есть мануалы, где на снимках все показано, но занимает много места, этот вариант как раз решит, плюс все красиво смотрится.Или, если вы не хотите иметь дополнительный элемент в современных браузерах и не против использования выражений IE, вы можете использовать псевдокод и добавить его в IE с помощью удобного выражения, которое выполняется только один раз для каждого элемента, поэтому не будет проблем с производительностью.

Но все это теория, переходим к установке:

По месту размещаем HTML

Код

<div class="block-container">
  <img src="http://zornet.ru/_ld/83/15262124.png" />
  <div class="block-front"><span>ZORNET.RU</span></div>
</div>
<div class="block-container">
  <img src="http://zornet.ru/_ld/83/08830581.png" />
  <div class="block-front"><span>ZORNET.RU</span></div>
</div>
<div class="block-container">
  <img src="http://zornet.ru/_ld/83/77995051.jpg" />
  <div class="block-front"><span>ZORNET.RU</span></div>
</div>

CSS

Код

.block-container {
  position: relative;
  float: left;
  margin: 2px;
  }

  .block-container,
  .block-container div,
  .block-container img {
  width: 149px;
  height: 149px;
  }

  .block-container div,
  .block-container img {
  position: absolute;
  }

  .block-container img {
  z-index: 1000;
  }

  .block-front {
  z-index: 1001;
  background-color: black;
  transition: all 0.4s ease-in-out 0s;
  opacity: 0;
  color: white;
  cursor: pointer;
  }

  .block-front:hover {
  opacity: .5;
  }

  .block-front span {
  display: block;
  font-weight: bold;
  padding: 58px 0;
  text-align: center;
  }

Когда объект помещается на страницу, он может быть расположен как абсолютный, так и относительный. Большинство объектов относятся к относительным, что означает, что если предыдущие объекты растут и становятся больше.

Демонстрация:

2017-11-30 Просмотров: 1793 Комментарий: (2)

Поделиться в социальных сетях

Материал разместил

Kosten

Похожие материалы

Оставь свой отзыв

Комментарий: 2
Порядок вывода комментариев: -SAM- 2017-12-01 00:34¹ +1 Вообще-то для вертикального выравнивания применяют свойство vertical-align, а центровка картинок делается как тут написано (что картинке присваивается блочное отображение и отступы задаются). И вот здесь писалось, цитирую: "В CSS рассмотрим одно из важных свойств, как text-align, которое как раз выставляет по центру или выравнивает текст или элемент дизайн." - на самом деле слова про выравнивания элемента дизайна ложны, поскольку так только центровка текста происходит. Допустим, мы имеем структуру вида <div align="center"><img/></div> (или <center><img/></center>), то картинка центруется, но не будет, если ей (или блоку) задать text-align:center ... там уже применяют свойство valign для нее или стилем делают div img {vertical-align:middle} (так по стандартам правильнее). Kosten 2017-12-02 00:38² 0 Здесь вероятнее, это материал предназначен для вид материалов и комментариев к нему. Хотя возможно его расположить на другую функцию, не исключаю на главной.