i am stuck at the img element centered within its parent element.(tribute page)

HTML-CSS
1

Tell us what’s happening:
i am trying to complete the tribute page project .Even though i have completed all the given requirements but i am still getting this error i.e
The element should be centered within its parent element.

Your code so far
html

<style>
  body{
    background-color:white;
    color: black;
    font-family:calibri;
     
  }
</style>
<div id= "main">
  <h1 id="title"> Quaid e Azam -The founder of pakistan</h1>
  
  <div id="img-div">
    <a id="tribute-link" target="_blank" href="https://en.wikipedia.org/wiki/Muhammad_Ali_Jinnah">
       
    <img id ="image" src="https://www.samaa.tv/wp-content/uploads/2019/12/Nazar-e-Quaid-Isb-Pkg-25-121.jpg" alt="pic of QuaideAzam" width="20%" height="20%">
    </a>
    <figcaption id ="img-caption">Muhammad Ali Jinnah was a barrister, politician and the founder of Pakistan. Jinnah served as the leader of the All-India Muslim League from 1913 until Pakistan's independence on 14 August 1947, and then as Pakistan's first Governor-General until his death. He is revered in Pakistan as Quaid-i-Azam and Baba-i-Qaum. m</figcaption>
    
  </div>
  <p id="tribute-info">
    <b>Quaid-e-Azam and Two Nation Theory</b>
    <p>Quaid-e-Azam was a firm advocate of two nation theory which became the ideological basis of Pakistan. He said:
 “The Muslims are a nation by every right to establish their separate homeland. They can adopt any means to promote and protect their economic social, political and cultural interests.”</p>
    
  </p>
</div>

**CSS**
#img-caption{
  width:400px;
  
}
#image{
  display:block;
  height:auto;
  max-width:100%;
  
 
}

Your browser information:

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

Challenge: Build a Tribute Page

Link to the challenge:

2

I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

Pre-formatted-text
Pre-formatted-text1356×380 401 KB

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (’).

3

Your image isn’t centered though.

If you google how to center an image css then you will get the answer you are looking for pretty quickly.

Hope that helps!

1 Like
4

I will search it . Thanks😊

5

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