В связи с переходом на новый движок... возможны сбои в работе! Простите!
Работы производятся прямо сейчас 19-03-2024! 🞨
Меню :
img (14)
foto (22)



Blog (1392)
php (329)
js (244)
html (147)
css (131)
html tags (62)
js tag (56)
jquery (42)
text (37)
js method (36)
php array (33)
js date (33)
form html (30)
online (29)
Показать еще :
fonts (26)
ruweb.net (25)
foto (22)
php file (20)
atom (20)
forum (19)
hosting (18)
svg (18)
input (18)
php date (17)
board (16)
php time (16)
html book (16)
color (15)
info (15)
img (14)
js time (14)
js url (14)
js events (14)
htaccess (13)
select (13)
notepad (13)
osclass (13)
keyboard (12)
знак (12)
dw block (12)
php img (12)
php path (12)
table (12)
download (12)
icon (11)
form (11)
jsphp (11)
alphabet (10)
keyframes (10)
js delete (10)
yandex (10)
mouse (10)
chart (9)
hover (9)
dosite (8)
browser (8)
php post (7)
comment (7)
php url (7)
iframe (6)
php get (6)
mysql (6)
click (6)
list (6)
canvas (6)
adminka (6)
vs code (6)
js id (5)
mb (5)
heading (5)
value (5)
reg.ru (5)
ftp (5)
year (5)
js math (5)
tag a (5)
bbcode (4)
php var (4)
base64 (4)
xml (4)
scandir (4)
games (4)
flags (4)
symbols (4)
week (4)
day (4)
ssl (4)
нок (4)
submit (4)
task (4)
vk (4)
month (4)
pages (4)
console (4)
js form (4)
domen (3)
line (3)
https (3)
js post (3)
jquery post (3)
money (3)
numbers (3)
js img (3)
padding (3)
куб (3)
captcha (3)
ucoz (3)
js hash (3)
tag hr (2)
details (2)
typeof (2)
seo (2)
prompt (2)
sitemap (2)
рся (2)
youtube (2)
height (2)
arrows (2)
js vars (2)
counter (2)
google (2)
qr kod (2)
video (2)
speed (1)
smile (1)
нод (1)
rutube (1)
scroll (1)
windows (1)
archive (1)
jino (1)
cursor (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/__img/__dates/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/__img/__dates/logo.png">

     </body>

    </html>

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

    Смотрим
Не стесняемся говорить спасибо!
Помочь проекту DwWeb.ru

Поделиться ссылкой! C друзьями или врагами!

Этим вы очень поможете проекту! Заранее огромное спасибо!

Ещё : dwweb.ru есть здесь:
ruweb
Все статьи авторские, при копироавании активная ссылка обязательна DwWeb.ru! © 2015 - 2024 Контакты. Реклама на сайте Лучший хостинг : RUWEB + помощь по RUWEB
Страница загружена за : 0.024299 секунд. Подробнее