How to set the paragraph to bottom of the images? - html

Question

This is my css :
div#outerdiv
{
/* padding:10px:*/
width:100%;
height:50%;
background-color:#eaa6a6;
position:absolute;
}
img#rcorners1
{
border-radius: 50%;
background: #5A0065;
margin:40% auto;
display:block;
width: 25%;
height: 25%;
}
p#unknown
{
margin:auto;
font-size:20px;
display:block;
text-align:center;
width: 100%;
position:absolute;
}
Inside the div i placed the image and trying to place the paragraph bottom to the image but it takes long space even if i gave margin 0% auto;
This is Html:
<div id="outerdiv">
<img id="rcorners1" src="img/man.png" alt="unknown number"> </img>
<p id="unknown">UNKNOWN NUMBER</p>
</div>
ScreenShot:

Answer 1

First fix you img tag, img does not have closing tag. It should be
<img id="rcorners1" src="img/man.png" alt="unknown number" />
div#outerdiv
{
/* padding:10px:*/
width:100%;
height:50%;
background-color:#eaa6a6;
position:absolute;
}
img#rcorners1
{
border-radius: 50%;
background: #5A0065;
margin:40% auto 0 auto;
display:block;
width: 25%;
height: 25%;
}
p#unknown
{
margin:auto;
font-size:20px;
display:block;
text-align:center;
width: 100%;
position:absolute;
}
/* if you want to have your bottom margin still 40%*/
/*p#unknown {
margin-bottom: 40%;
}*/
<div id="outerdiv">
<img id="rcorners1" src="img/man.png" alt="unknown number" />
<p id="unknown">UNKNOWN NUMBER</p>
</div>
Actually img tag is taking margin-bottom: 40% which you need to make 0.
img#rcorners1{
border-radius: 50%;
background: #5A0065;
margin:40% auto 0 auto; // margin-bottom: 0;
display:block;
width: 25%;
height: 25%;
}