top of page
Image Position

Image Position:

  • Image in the center of the page

  • Text under the image and centred with the image

 

HTML

 

<!DOCTYPE html>

<html>

<head>

<link rel="stylesheet" href="style.css">

</head>

 

<body>

 

<div class="image-row">

 

<div class="cake">

<img src="blackforest.jpg" alt="Black Forest Cake">

<p>Black Forest Cake</p>

</div>

 

<div class="cake">

<img src="chocolate.jpg" alt="Chocolate Cake">

<p>Chocolate Cake</p>

</div>

 

<div class="cake">

<img src="fruit.jpg" alt="Fruit Cake">

<p>Fruit Cake</p>

</div>

 

</div>

 

</body>

</html>

​​

​

CSS 

.image-row {

display: flex;

justify-content: center;

gap: 30px;

}

 

.cake {

text-align: center;

}

 

.cake img {

width: 200px;

height: auto;

}

bottom of page