Как выровнять картинку по центру div с помощью CSS?

Подписаться 15 тыс.

Просмотров 96 тыс.

50% 1

Лениво без кода - телеграм-канал, в котором публикуют проверенные плагины для WordPress. Читай канал - t.me/+DNVp4I4suzQ4NjA6 чтобы не тратить время на поиск плагинов.
В этом видео я покажу вам три техники с помощью которых можно выровнять картинку по центру div.
Заходите на сайт - webupblog.ru
Подписывайтесь в наши группы
Facebook - / webupblog
Вконтакте - webupblog
✔ -------------
Я в вк - shevchenko_slavik
Буду благодарен за лайк ♥ и Подписку ✔

Опубликовано:

14 янв 2017

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 58

@aleksandrpolikhronidi9644 8 месяцев назад

Уфф... большое спасибо, я уже 2 часа сижу , дрочусь, всё на свете проклял, никак набор картинок по центру выставить не могу, потом вспомнил что есть ютюб, и тут вы! Последний способ реально мне помог. Прям аж легче на душе стало. Большое спасибо за ваш труд!

@user-zf7jz9yn1o 3 года назад

Наконец-то просто и понятно, спасибо огромное!

@topmusicchannel1702 6 лет назад

Спасибо, очень хороший урок👍👍👍

@nomymind. 8 месяцев назад

Огромное спасибо. Помогаешь спустя столько то лет.

@MrSekator 5 лет назад

Я вчера начал изучать HTML и CSS. Ты просто Шикарен! Я 3 часа по интернету искал, как выровнять кнопку со ссылкой в div, где div это вся кнопка используя display:block; , по вертикали и горизонтали. Спасибо тебе за доступный к понимаю для новичка урок!

@varfolomeiq 5 лет назад

Мне интересно как это див может быть кнопкой

@Raccoon_ph 5 лет назад

@вася Нагибатор но все же...

@MikeMentzer09 Год назад

@@Raccoon_ph привет

@Raccoon_ph Год назад

@@MikeMentzer09 бажаю здоров'я!

@BMikel 7 лет назад

Отличный урок! Еще можно было добавить выравнивание с помощью transform: translateY(50%)

@user-wo7vc6ow6d 4 года назад

Спасибо. Быстро, просто и понятно. От меня лайк и подписка.👍👍👍

@dongondon4814 3 года назад

ля ролики смешные

@dmytromoroz4451 4 года назад

Спасибо за полезную инфу! 👍👍👍

@WebupblogRu 4 года назад

Спасибо за просмотр.

@user-bk2hf2wp4d 7 лет назад

не сталкивался с flex ,спасибо за способ.

@user-ho7go7sk1o 5 лет назад

изображение является строчным элементом? Мб строчно-блочным?

@user-xs5ir4ud7b 5 лет назад

первый вариант получился, остальные нет, почему так случилось?

@user-vh5kq6pm7e 7 лет назад

С flex можно проще написать - *margin:auto;* и картинка будет в центре по обоим осям

@vladross6130 7 лет назад

Я тебя удивлю, но так можно писать везде

@user-vh5kq6pm7e 7 лет назад

Billy Bonk да удивил, я думал что кроме флексов по вертикали не ровняет

@danyambbfitness1151 5 лет назад

Спасибо, 👍👍👍

@tatianas2970 3 года назад

Спасибо!Очень помог!

@user-iy5bh8jf3b 4 года назад

Спасибо огромное!

@SeeingHumanBoxes 5 лет назад

А если я хочу с помощью флекс отцентрировать по y только?

@yuzh1962 6 лет назад

Спасибо!!!

@user-hp9yf6re2m 7 лет назад

Очень люблю твои видео!!!!!!!

@WebupblogRu 7 лет назад

Спасибо)

@user-tl6zx4ot5z 3 года назад

Спасибо большое❣

@vladimirzdanov1319 2 года назад

Спасибо!

@spacetape 3 года назад

Привет, ты случайно не ведёшь канал evil studios? настолько похожие голоса и не верится в то что вы разные люди, за урок спасибо!

@WebupblogRu 3 года назад

Привет) Не слышал о таком канале

@user-kh2tk7um5p 5 лет назад

От души

@remixlife3741 4 года назад

Большое спасибо!

@WebupblogRu 4 года назад

Спасибо ивам за просмотр)

@xlaoru 2 года назад

Спасибо, что помогли (2 способ)

@alzgamer5787 4 года назад

А если картинка больше div'а, как мне ее отцентрировать? Пробовал этим способом - не получается.

@WebupblogRu 4 года назад

что значит больше дива? у нее фиксированная высота и ширина?

@Enigmatic199 3 года назад

@@WebupblogRu Это скорее всего новая собственная разработка под названием HTML Чудо-юдо!!! но не выдержал и раньше патентирования выдал весь секрет на сотни миллиардов евро!!;) ай-яй-яййй....

@user-bl5pj2dw8i 6 лет назад

Покажи как по середине раскрашивать фото

@reymow2762 2 года назад

Бог

@mykhailobokalo6037 4 года назад

Тег img cтрочно-блочний елемент

@dmitruz1900 2 года назад

а как сделать чтоб текст был справа от картинки?

@biohazard709 2 года назад

About Us Proin iaculis purus consequat sem cure. July 2010 Our Humble Beginnings Proin iaculis purus consequat sem cure digni ssim. Donec porttitora entum suscipit aenean rhoncus posuere odio in tincidunt. Proin iaculis purus consequat sem cure digni ssim. Donec porttitora entum suscipit. July 2010 Our Humble Beginnings Proin iaculis purus consequat sem cure digni ssim. Donec porttitora entum suscipit aenean rhoncus posuere odio in tincidunt. Proin iaculis purus consequat sem cure digni ssim. Donec porttitora entum suscipit. July 2010 Our Humble Beginnings Proin iaculis purus consequat sem cure digni ssim. Donec porttitora entum suscipit aenean rhoncus posuere odio in tincidunt. Proin iaculis purus consequat sem cure digni ssim. Donec porttitora entum suscipit. July 2010 Our Humble Beginnings Proin iaculis purus consequat sem cure digni ssim. Donec porttitora entum suscipit aenean rhoncus posuere odio in tincidunt. Proin iaculis purus consequat sem cure digni ssim. Donec porttitora entum suscipit. .about__us { display: inline-block; } .about__us2 { display: table-row; float: right; } .about__us h3 { font-size: 18px; margin-bottom: 5px; } .about__us p { font-size: 14px; color: #777777; line-height: 1.55em; } .wrap { text-align: right; float: left; width: 335px; padding-bottom: 70px; } .about__us img { margin-left: 35px; } .wrap2 { text-align: left; float: right; width: 335px; padding-bottom: 70px; } .about__us2 img { margin-right: 35px;

@biohazard709 2 года назад

И будет тебе счастье!!!

@abdurahmonrahmonov8357 5 лет назад

эх

@user-xs5ir4ud7b 5 лет назад

прилипли к левому углу и все тут

@apollon0326 5 лет назад

@sylfurio Год назад

.image-flex { display: flex; align-items: center; justify-content: center; }

@ms.liragrut8222 3 года назад

не одна не работает

@WebupblogRu 3 года назад

Не может быть.

@user-ep8te2zz1u 4 года назад

По "обеим" осям.

@aau8 4 года назад

по обоям

@TinTaBraSS777 3 года назад

зачем эта неполная информация !? ) что бы побольше уроков наделать ?

@WebupblogRu 3 года назад

Вы о чем? Урок закрывает определенный вопрос. Где не полная информация?

@TinTaBraSS777 3 года назад

WebUpBlog - Уроки веб разработки так ты тогда делай целый цикл уроков начни с того как открыть браузер потом второй как открыть сайт потом третий как расшифровывается хтмл и так далее на тысячу уроков тебе материала хватит ) потом к джаваскрипту перейдешь там на десять тысясь уроков материала