как поставить картинку по центру html css
О картинке по центру блока/страницы.
- Поставить картинку по центру другого блока.(grid)
- Поставить картинку по центру страницы.(grid)
- Поставить картинку по центру div align + display
- Поставить картинку по центру страницы align + display
- Ставим картинку по центру с помощью flex
- Картинку посередине страницы с помощью translate
Как поставить картинку по центру другого блока.(grid)
Для того, чтобы поставить картинку по центру другого блока нам понадобится:
класс для картинки - "kartinka_po_tsentru_grid" + атрибут src, где прописываем путь до картинки:
Задаем свойства для картинки... ставим посередине по горизонтали - "margin: auto;". Задаем высоту height : "height: 100px;"
margin: auto;
height: 100px;
}
Оборачиваем данную картинку в div с классом "div_class"
Здаем свойства для div - высота height + background color + display со значением "grid"
height: 200px;
background: #c07f7f;
display: grid;
}
Соберем код расположения картинки по центру.
<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
Далее нам остаётся - прямо здесь поставить выше приведенный код картинки по центру блока:
Поставить картинку по центру страницы.(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>
Поставим данный код на отдельной странице.
Результат расположения картинки по центру
Обращаю ваше внимание, что ссылка "вернуться" - стоит на картинке, если мы поместим рядом тег ссылки, то страница автоматически поделится пополам...
смотримПоставить картинку по центру div align + display
Используем для второго варианта установки img по центру с помощью align + display:
Для этого нам понадобится, опять тег картинки img с атрибутом src:
Обернем нашу картинку в div
<img src="https://dwweb.ru/путь/new_logo.png">
</div>
Применим стили для данного дива :
text-align: center;
height: 200px;
width: 740px;
background: beige;
vertical-align: middle;
display: table-cell;
}
Соберем весь код вместе, который поставит нашу картинку по центру
<div id="kartinka_po_tsentru">
<img src="https://dwweb.ru/genm/new_logo.png" >
</div>
div#kartinka_po_tsentru {
text-align: center;
height: 200px;
width: 740px;
background: beige;
vertical-align: middle;
display: table-cell;
}
Как видим... наша картинка благополучно расположилась по центру div:
Поставить картинку по центру страницы align + display
Следующий пункт... поставим, что мы использовали в предыдущем пункте для того, чтобы поставить картинку по центру страницы.
Пример страницы с картинкой по центру
<!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>
Смотрим на результат установки картинки по центру страницы.
смотримСтавим картинку по центру с помощью flex
Следующий способ поставить картинку по центру - это display со значением "flex".
Для того, чтобы поставить картинку по центру нам понадобится, опять картинка img с id + оберенем в div с классом class
<img id="kartinka_po_tsentru_flex" src="https://dwweb.ru/путь/new_logo.png">
</div>
Немного стилей:
.kartinka_po_tsentru_flex {
display: flex;
height: 200px;
background: burlywood;
}
#kartinka_po_tsentru_flex {
margin: auto;
}
</style>
<img id="kartinka_po_tsentru_flex" src="https://dwweb.ru/путь/new_logo.png">
</div>
.kartinka_po_tsentru_flex {
display: flex;
height: 200px;
background: burlywood;
}
#kartinka_po_tsentru_flex {
margin: auto;
}
</style>
Картинка по центру с помощью flex
Результат... давайте разместим код, который показан выше прямо здесь:
Картинку посередине страницы с помощью translate
Один из вариантов поставить картинку по центру, использование "translate"
<!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>
Пример размещения кода картинки по центру
Смотримкартинка по центру
картинка по центру 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
html как поставить картинку по центру в div