Not pad КАК ИДЕАЛЬНО ТОЧНО РАЗМЕСТИТЬ КАРТИНКУ НА САЙТЕ . Html

Question

Not pad КАК ИДЕАЛЬНО ТОЧНО РАЗМЕСТИТЬ КАРТИНКУ НА САЙТЕ . Html

Матвей Ляховко Ученик (97), открыт 5 дней назад

Что надо написать в Note pad чтобы у меня на сайте картинки были ровными и не были разной высоты
Вот у меня картинки стоят рядом обе по ширине высоте одинаковые круги но одна ниже другая выше ⬆
Как сделать их на одной линии

Answer 1

_ Искусственный Интеллект (863226) 5 дней назад

задать у картинок ширину и высоту

Answer 2

 <!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>Выравнивание фотографии по центру</title> 
<style> 
.fig { 
text-align: center; /* Выравнивание по центру */ 
} 
</style> 
</head> 
<body> 
<p>Текст до изображения</p> 
<p class="fig"><img src="image.jpg" width="320" height="181" alt="Фотография"></p> 
<p>Текст после изображения</p> 
</body> 
</html>

Answer 3

Используй CSS для выравнивания

Добавь стили, чтобы картинки были на одной линии. Вот пример кода:

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Выравнивание картинок</title>
<style>
.image-container {
display: flex; /* Используем Flexbox для выравнивания */
align-items: center; /* Выравниваем по вертикали */
}
.image-container img {
width: 100px; /* Задайте одинаковую ширину */
height: 100px; /* Задайте одинаковую высоту */
margin: 0 10px; /* Отступ между картинками */
}
</style>
</head>
<body>
<div class="image-container">
<img src="image1.jpg" alt="Картинка 1">
<img src="image2.jpg" alt="Картинка 2">
</div>
</body>
</html>

Если не хочешь использовать Flexbox, можно использовать свойство vertical-align:

<style>
img {
vertical-align: middle; /* Выравниваем картинки по вертикали */
width: 100px;
height: 100px;
margin: 0 10px;
}
</style>
<div>
<img src="image1.jpg" alt="Картинка 1">
<img src="image2.jpg" alt="Картинка 2">
</div>

Answer 4

Размеры изображений и линия их расположения — это совершенно разные понятия. Если не знаешь как выразить словами, присылай скрины... и возможно код