Tell us what’s happening:
I’ve been havin trouble figuring out what I am missing. The problem I am sitting with is:
-
User Story #9: The
img
element should be centered within its parent element.
Your code so far
HTML
--------------------------------------------------------
<main id= "main">
<div id="box1">
<h1 id= "title"> Sir Isaac Newton </h1>
<p id= "tribute-info">
Sir Isaac Newton (25 December 1642 – 20 March 1726/27) was an English mathematician, physicist, astronomer, theologian, and author (described in his own day as a "natural philosopher") who is widely recognised as one of the most influential scientists of all time, and a key figure in the scientific revolution. His book Philosophiæ Naturalis Principia Mathematica ("Mathematical Principles of Natural Philosophy"), first published in 1687, laid the foundations of classical mechanics. Newton also made seminal contributions to optics, and shares credit with Gottfried Wilhelm Leibniz for developing the infinitesimal calculus.
</p>
<div id="img-div"><img id="image">
<p id="img-caption"> Sir Isaac Newton, best mathematician that ever lived </i></p> </div>
<footer id="footer">
<a id="tribute-link" target="_blank" href="https://en.wikipedia.org/wiki/Isaac_Newton">For more information about Isaac Newton<br>Click Here</a><br>
</footer>
</div>
</main>
----------------------------------------------------------
CSS:
body {
background-color: white;
}
#main {
font-family: "Times New Roman", Times, serif;
}
#title {
font-size: 35px;
}
#box1 {
display: block;
max-width: 400px;
height: 900px;
border: 5px solid grey;
padding: 75px;
margin: auto;
margin-top: 300px;
text-align: center;
font-size: 17px;
}
#img-div {
display: block;
text-align: center;
background: grey;
padding: 4px;
content: url(https://www.biography.com/.image/t_share/MTM1NTU3NzMzOTA1NjQ3NjI2/sir-isaac-newton-wikimedia_commonsjpg.jpg);
margin: auto;
margin-top: 20px;
max-width: 80%;
}
img{
height: auto;
margin: auto;
display: block;
max-width: 50%;
}
#img-caption {
color: black;
align-self: top;
font-size: 10vmin;
}
#tribute-info {
display: block;
max-width: 100%;
margin: auto;
font-size: 2.2vmin;
}
#tribute-link {
color: #9ec3f5;
}
.bigger_text{
font-size: 2.5vmin;
}
.smaller_margins {
margin-bottom: 15px;
}
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/75.0.3770.142 Safari/537.36
.
Link to the challenge: