Kishore Kumar Kishore Kumar - 6 months ago 11
HTML Question

How to set the paragraph to bottom of the images?

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:
enter image description here

Answer

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%;
}