html текст
All interests
  • All interests
  • Design
  • Food
  • Gadgets
  • Humor
  • News
  • Photo
  • Travel
  • Video
Click to see the next recommended page
Like it
Don't like
Add to Favorites

Vertically center div – центруем контейнер по вертикали разными способами

Добрый день всем, кто перешел сегодня на luzlol.me! Наверняка каждый когда-нибудь задавался вопросом о том, как выровнять HTML-элемент по центру вертикально. И скорее всего, в конечнм счете вы использовали метод «табличной верстки» – вручную присваивали display:table-cell, но использование «табличной роли» накладывает некоторые ограничения. Есть пара способов поизящнее: display: inline-block и нашумевшая Flexbox модель!

vertically center div

Display: inline-block

Этот способ на сегодня работает во всех браузерах, даже Internet Explorer за версией 9 и ниже. Не совсем понятно почему он используется не так часто. Для родительского элемента мы прописываем «высоту шрифта» свойством line-height: 200px (равную высоте родительского элемента) для последующего центрирования по вертикали и text-align: center – для горизонтали. Для дочернего inline-block контейнера мы делаем vertical-align: middle.

.parent {
  width: 200px;
  line-height: 200px;
  text-align: center;
}
.child {
  display: inline-block;
  vertical-align: middle;
  width: 100px;
  height: 100px;
}

Значение CSS-свойства display: inline-block делает элемент «строчным», поэтому он начинает вести себя как текст и соответственно подчиняться любым свойствам родительского элемента, которые касаются работы с текстом.

Display: flex

Как известно из статьи Flexbox модель верстки – замена CSS-свойству float и ширине в процентах поддержка данного свойства браузерами скудная, поэтому этот способ к сожалению работает только для «нового» синтаксиса – то есть только в Chrome и Internet Explorer 10+. Должно было работать еще ив Firefox версии 20 и выше, но от чего-то ребята из Mozilla не реализовали полную поддержку flexbox модели. Я искринне надеюсь, что за этот год «подтянутся» все браузеры: Opera перешла на Blink, и Apple в Safari 7 тоже подтянется.

Как бы то ни было, у родительского элемента мы используем display: flex, у дочернего же элемента просто прописываем margin: auto, для «нового» синтаксиса flexbox такой способ выравнивает не только по горизонтали, но и по вертикали.

.parent {
  height: 200px;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
}
.child {
  margin: auto;
  width: 100px;
  height: 100px;
}

vertically center div

Полностью рабочий пример как всегда найдете на Codepen!

Check out this Pen!

Удачного дня, ребят и спасибо за внимание!

Читать дальше
Twitter
Одноклассники
Мой Мир

материал с luzlol.me

7

      Add

      You can create thematic collections and keep, for instance, all recipes in one place so you will never lose them.

      No images found
      Previous Next 0 / 0
      500
      • Advertisement
      • Animals
      • Architecture
      • Art
      • Auto
      • Aviation
      • Books
      • Cartoons
      • Celebrities
      • Children
      • Culture
      • Design
      • Economics
      • Education
      • Entertainment
      • Fashion
      • Fitness
      • Food
      • Gadgets
      • Games
      • Health
      • History
      • Hobby
      • Humor
      • Interior
      • Moto
      • Movies
      • Music
      • Nature
      • News
      • Photo
      • Pictures
      • Politics
      • Psychology
      • Science
      • Society
      • Sport
      • Technology
      • Travel
      • Video
      • Weapons
      • Web
      • Work
        Submit
        Valid formats are JPG, PNG, GIF.
        Not more than 5 Мb, please.
        30
        surfingbird.ru/site/
        RSS format guidelines
        500
        • Advertisement
        • Animals
        • Architecture
        • Art
        • Auto
        • Aviation
        • Books
        • Cartoons
        • Celebrities
        • Children
        • Culture
        • Design
        • Economics
        • Education
        • Entertainment
        • Fashion
        • Fitness
        • Food
        • Gadgets
        • Games
        • Health
        • History
        • Hobby
        • Humor
        • Interior
        • Moto
        • Movies
        • Music
        • Nature
        • News
        • Photo
        • Pictures
        • Politics
        • Psychology
        • Science
        • Society
        • Sport
        • Technology
        • Travel
        • Video
        • Weapons
        • Web
        • Work

          Submit

          Thank you! Wait for moderation.

          Тебе это не нравится?

          You can block the domain, tag, user or channel, and we'll stop recommend it to you. You can always unblock them in your settings.

          • decades
          • домен luzlol.me

          Get a link

          Спасибо, твоя жалоба принята.

          Log on to Surfingbird

          Recover
          Sign up

          or

          Welcome to Surfingbird.com!

          You'll find thousands of interesting pages, photos, and videos inside.
          Join!

          • Personal
            recommendations

          • Stash
            interesting and useful stuff

          • Anywhere,
            anytime

          Do we already know you? Login or restore the password.

          Close

          Add to collection

             

            Facebook

            Ваш профиль на рассмотрении, обновите страницу через несколько секунд

            Facebook

            К сожалению, вы не попадаете под условия акции