Как поставить картинку по центру html css
картинка по центру, поставить картинку по центру страницы, или картинку по центру другого блока/div, сколько способов существует поставить картинку по центру 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
Следующий пункт... поставим, что мы использовали в предыдущем пункте для того, чтобы поставить картинку по центру страницы.
Но для выше приведенного примера, родительский блок, должен иметь высоту и ширину. АВ у нас эти два значения всегжда будут "переменными" - нам потребуется получить высоту(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>
Смотрим на результат установки картинки по центру страницы.
смотримСтавим картинку по центру с помощью 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
Результат... давайте разместим код, который показан выше прямо здесь:
Данный код на отдельной странице размещать не будут, т.к. "display:flex" похож на grid -
Картинку посередине страницы с помощью 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>
Пример размещения кода картинки по центру
СмотримСвои комменты в ожидании переделки!
Когда сделаю не знаю!
Времени нет...
Иначе сообщение будет удалено, вас в бан - все просто!
Но если, сил нет как хочется высказать всё, что вы думаете об этом, пожалуйста - комменты от Vk - форма ниже:
