Tribute Page - Build a Tribute Page

HTML-CSS
1

Tell us what’s happening:

I would like to know what is the best way to align the image in the center

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
  <link rel="stylesheet" href="styles.css">
  <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scalE=1.0">
   <title>Cormac McCarthy</title>
   </head>
   <body>
     <div class="a1">
     <h1>Cormac McCarthy</h1>
     </div>
     <div class="a2"><h2>The man who wrote Blood Meridian
       </h2></div>
       <div class="a3">
         <img src="https://cloudfront-us-east-1.images.arcpublishing.com/dmn/2RSJMUDIPRAOLOLR6C236PW2OI.jpg">
       </div>
     </body>
     </html>

/* file: styles.css */
.a1{
  text-align:center;
  padding-top:5px;
  padding-bottom:5px;
background-color:#8B4513;
font-family:georgia;
}
.a2{
  text-align:center;
  font-size:10;
}

.a3 img{
  width:50%;
  height:auto;
  ;
  
}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/123.0.0.0 Safari/537.36

Challenge Information:

Tribute Page - Build a Tribute Page

2

Use flexbox to centre the .a3 div.

3

how do i scale down the image? I tried creating a new selector which is .div img and when im trying to increase the width and height the image is scaling down but its aligning to the left

.a1{
  text-align:center;
  padding-top:5px;
  padding-bottom:5px;
background-color:#CCCCCC;
font-family:georgia;

}
.a2{
  text-align:center;
  font-size:10;
}

.a3 div{
  max-width:100%;
  max-height:auto;
  flex-box:center;
  background-color:white;
  display:flex;
  justify-content:center; 
  }
  .a3 img{
   width:50%;
   height:auto;
  }
.a4{
  text-align:center;
  display:inline-block;
  font-size:15;
  padding-left:1px;
  padding-right:1px;
  padding-bottom:1px;
  padding-top:4;
  background-color:white;
}
.a5{
  padding-top:10px;
  text-align:center;

}
5

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.