Всех друзей поздравляем с Новым годом! Всего вам самого наилучшего! Всех благ, здоровья а материальное приложится!
СКРИПТЫ althtmlcssphpjsblog

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

Поддержи проект!!! smile

картинка по центру, поставить картинку по центру страницы, или картинку по центру другого блока/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/___dwweb.ru/__template/images/new_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/___dwweb.ru/__template/images/new_logo.png">

     </body>

    </html>

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

    Смотрим


Последняя дата редактирования : 12.03.2021 21:31
//dwweb.ru/comments_1_5/include/img/hand_no_foto.png
no
no
Еще никто не прокомментировал! COMMENTS+   BBcode
аватар
🞨
Загрузить свой аватар
(max ширина, высота = 200px)

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

Счетчик в график :

Построение гравиков
Основа для графика : счетчик посещаемости.
Последние комментарии :
Марат :
08/04/2021 07:12
Сам афигеваю!
подробнее.
stream :
07/04/2021 05:56
Неплохо)
подробнее.
Марат :
24/03/2021 11:01
Да что вы!? За что обижаться то?Вы тот редкий человек, который смог написать! Вы молодец!Человек, же который не…
подробнее.
Виталий :
24/03/2021 06:05
Не стоит обижаться, люди могут не понимать что ошибка не критична. Может быть до конца не изучали…
подробнее.
Марат :
23/03/2021 02:09
Спасибо, за сообщение! В архив попал вариант, который был на тестировании и там остались некоторые…
подробнее.