СКРИПТЫ alt phpjshtmlcssblog
ТЕГИ:
php (267)
js (136)
html (133)
css (96)
html tags (58)
edit text (37)
jquery (36)
form html (29)
php array (28)
foto (23)
fonts (22)
forum (19)
atom (17)
board (17)
hosting (17)
html book (17)
Показать еще :
svg (16)
js method (16)
php file (15)
ruweb.net (15)
color (14)
osclass (13)
htaccess (13)
path (12)
table (12)
input (11)
icon (11)
info (11)
online (11)
yandex (11)
php date (11)
notepad (11)
js delete (11)
php img (10)
url (10)
jsphp (10)
form (8)
task (7)
cookie (7)
comment (7)
php url (7)
click (6)
ftp (6)
js url (6)
value (5)
reg.ru (5)
mb (5)
adminka (5)
js id (4)
bbcode (4)
js form (4)
select (4)
search (4)
js copy (4)
vk (3)
captcha (3)
js time (3)
iframe (3)
vs code (3)
sitemap (2)
js post (2)
browser (2)
console (2)
seo (2)
tag hr (2)
ukoz (2)
header (1)
archive (1)
smile (1)
numbers (1)
ssl (1)
books (1)

как поставить картинку по центру html css

картинка по центру, поставить картинку по центру страницы, или картинку по центру другого блока/div, сколько способов существует поставить картинку по центру css. Рассмотрим несколько примеров установки картинки по центру.

О картинке по центру блока/страницы.

  1. Поставить картинку по центру другого блока.(grid)
  2. Поставить картинку по центру страницы.(grid)
  3. Поставить картинку по центру div align + display
  4. Поставить картинку по центру страницы align + display
  5. Ставим картинку по центру с помощью flex
  6. Картинку посередине страницы с помощью translate

  1. Как поставить картинку по центру другого блока.(grid)

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

    класс для картинки - "kartinka_po_tsentru_grid" + атрибут src, где прописываем путь до картинки:

    <img class="kartinka_po_tsentru_grid" src="https://dwweb.ru/путь/new_logo.png">

    Задаем свойства для картинки... ставим посередине по горизонтали - "margin: auto;". Задаем высоту height : "height: 100px;"

    img.kartinka_po_tsentru_grid{
    margin: auto;
    height: 100px;
    }

    Оборачиваем данную картинку в div с классом "div_class"

    <div class="div_class"></div>

    Здаем свойства для div - высота height + background color + display со значением "grid"

    .div_class {
    height: 200px;
    background: #c07f7f;
    display: grid;
    }

    Соберем код расположения картинки по центру.

    Html:

    <div class="div_class">

    <img class="kartinka_po_tsentru_grid" src="https://dwweb.ru/путь/new_logo.png">

    </div>

    css:

    <style>

    .div_class {

    height: 200px;

    background: #c07f7f;

    display: grid;

    }

    img.kartinka_po_tsentru_grid{

    margin: auto;

    height: 100px;

    }

    </style>

    Смотрим результат установки картинки по центру div

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


  2. Поставить картинку по центру страницы.(grid)

    Теперь выше приведенный способ применим к странице.

    Т.е разместим нашу картинку посередине страницы с помощью grid. Нам понадобится:

    Возьмем код отсюда: простая страница

    Вместо div у нас будет выступать "body"...

    Чтобы долго не распинаться давайте посмотрим на код:

    <!DOCTYPE html>

    <html lang="ru">

     <head>

      <meta charset="UTF-8">

       <META NAME="ROBOTS" CONTENT="NOINDEX,NOFOLLOW">

       <title>Пример веб-страницы</title>

        <style>

        html, body {

         width: 100%;

         height: 100%;

         background: #c07f7f;

         padding: 0;

         margin: 0;

         display: grid;

        }

        img.kartinka_po_tsentru_grid{

         margin: auto;

         height: 100px;

        }

        </style>

     </head>

     <body>

      <img border="1" class="kartinka_po_tsentru_grid" src="https://dwweb.ru/путь/new_logo.png">

     </body>

    </html>


    Поставим данный код на отдельной странице.

    Результат расположения картинки по центру

    Обращаю ваше внимание, что ссылка "вернуться" - стоит на картинке, если мы поместим рядом тег ссылки, то страница автоматически поделится пополам...

    смотрим


  3. Поставить картинку по центру div align + display

    Используем для второго варианта установки img по центру с помощью align + display:

    Для этого нам понадобится, опять тег картинки img с атрибутом src:

    <img src="https://dwweb.ru/путь/new_logo.png">

    Обернем нашу картинку в div

    <div id="kartinka_po_tsentru">
    <img src="https://dwweb.ru/путь/new_logo.png">
    </div>

    Применим стили для данного дива :

    div#kartinka_po_tsentru {
    text-align: center;
    height: 200px;
    width: 740px;
    background: beige;
    vertical-align: middle;
    display: table-cell;
    }

    Соберем весь код вместе, который поставит нашу картинку по центру

    Html:

    <div id="kartinka_po_tsentru">

    <img src="https://dwweb.ru/genm/new_logo.png" >

    </div>

    style:

    div#kartinka_po_tsentru {

    text-align: center;

    height: 200px;

    width: 740px;

    background: beige;

    vertical-align: middle;

    display: table-cell;

    }

    Результат расположения картинки по центру внутри div:

    Как видим... наша картинка благополучно расположилась по центру div:

    kartinka_po_tsentru


  4. Поставить картинку по центру страницы align + display

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

    Здесь есть НО! Но для выше приведенного примера, родительский блок, должен иметь высоту и ширину. АВ у нас эти два значения всегжда будут "переменными" - нам потребуется получить высоту(innerHeight) и ширину(innerWidth) и передать в тег "body" с помощью javascript

    Пример страницы с картинкой по центру

    <!DOCTYPE html>

    <html lang="ru">

     <head>

      <meta charset="UTF-8">

       <META NAME="ROBOTS" CONTENT="NOINDEX,NOFOLLOW">

       <title>Картинка по центру grid</title>

        <style>

         body {

         background: beige;

         padding: 0;

         margin: 0;

         text-align: center;

         vertical-align: middle;

         display: table-cell;

         }

        </style>

     </head>

     <body>

      <img class="kartinka_po_tsentru_grid" src="https://dwweb.ru/___file_cms/img/logo.png">

     </body>

    </html>

    <script>document.querySelector("body").style.height = innerHeight + ".px";

    document.querySelector("body").style.width = innerWidth + ".px";</script>


    Смотрим на результат установки картинки по центру страницы.

    смотрим


  5. Ставим картинку по центру с помощью flex

    Следующий способ поставить картинку по центру - это display со значением "flex".

    Для того, чтобы поставить картинку по центру нам понадобится, опять картинка img с id + оберенем в div с классом class

    <div class="kartinka_po_tsentru_flex">
    <img id="kartinka_po_tsentru_flex" src="https://dwweb.ru/путь/new_logo.png">
    </div>
    Css:

    Немного стилей:

    <style>
    .kartinka_po_tsentru_flex {
    display: flex;
    height: 200px;
    background: burlywood;
    }
    #kartinka_po_tsentru_flex {
    margin: auto;
    }
    </style>

    Соберем весь код вместе: Html:
    <div class="kartinka_po_tsentru_flex">
    <img id="kartinka_po_tsentru_flex" src="https://dwweb.ru/путь/new_logo.png">
    </div>
    Css:
    <style>
    .kartinka_po_tsentru_flex {
    display: flex;
    height: 200px;
    background: burlywood;
    }
    #kartinka_po_tsentru_flex {
    margin: auto;
    }
    </style>

    Картинка по центру с помощью flex

    Результат... давайте разместим код, который показан выше прямо здесь:

    Данный код на отдельной странице. Данный код на отдельной странице размещать не будут, т.к. "display:flex" похож на grid -


  6. Картинку посередине страницы с помощью translate

    Один из вариантов поставить картинку по центру, использование "translate"

    Html:

    <!DOCTYPE html>

    <html lang="ru">

     <head>

      <meta charset="UTF-8">

       <title>Картинка по центру</title>

        <style>

         img {

          position: absolute;

          top: 50%;

          left: 50%;

          width: 320px;

          height: 100px;

          border: 1px solid #aba6a6;

          transform: translate(-50%,-50%);

          BACKGROUND: #f3f3f3d1;

         }

        </style>

     </head>

     <body>

       <img src="https://dwweb.ru/___file_cms/img/logo.png">

     </body>

    </html>

    Пример размещения кода картинки по центру

    Смотрим

Пользуйтесь на здоровье! Не забудьте сказать спасибо
Теги :
картинка по центру
картинка по центру html
картинка по центру css
торговый центр картинка
как сделать картинку по центру
выровнять картинку по центру html
как разместить картинку по центру
как в html сделать картинку по центру
картинка по центру css
выровнять картинку по центру css
css картинка по центру блока
выравнивание картинки по центру css
как расположить картинку по центру css
как сделать картинку по центру в css
как разместить картинку по центру в css
как поставить картинку по центру в css
картинка по центру html css
как выровнять картинку по центру блока css
расположение картинки по центру css
картинка по центру div css
картинка по центру html без css
css картинка по центру экрана
css разместить картинку по центру блока
css выравнивание картинки по центру блока
html css transform картинка в центр экрана
выровнять картинку по центру css по вертикали
как поместить картинку по центру в css

Сообщение системы комментирования :

01.09.2021

Форма пока доступна только админу... скоро все заработает...надеюсь...

Последние комментарии :
Марат :
10.10.2021 17:20
Добавлен новый смайл
подробнее.
Марат :
05.10.2021 26:37
Страница sitemap.html восстановлена. Но будут вводиться только страницы…
подробнее.
Марат :
04.10.2021 38:22
Добавил несколько вариантов поставить смайл на страницу своего сайта! 3 варианта! Кроме варианта скачать…
подробнее.
Марат :
17.09.2021 28:02
Установка Яндекс поиск на сайт! Контент обновлен на 100%. Такое ощущение, что старый текст не я…
подробнее.
Марат :
07.09.2021 23:21
Частенько приходится исправлять ошибки и вот...как-то я обратил внимание на надпись: "нажми ctrl enter" на сайте и…
подробнее.
Марат :
23/07/2021 10:58
Сам офигеваю...
подробнее.