如何将段落设置为图像的底部？

Question

这是我的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;
}

在div内部我放置了图像并试图将段落置于图像底部，但即使我给了保证金0％自动，也需要很长的空间;

这是Html：

<div id="outerdiv">

        <img id="rcorners1" src="img/man.png" alt="unknown number">             </img>
        <p id="unknown">UNKNOWN NUMBER</p>

    </div>

截图：

Answer 1

首先修复img代码，img没有结束代码。它应该是

<img id="rcorners1" src="img/man.png" alt="unknown number" />

＆＃13;

＆＃13;

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

＆＃13;

<div id="outerdiv">

    <img id="rcorners1" src="img/man.png" alt="unknown number" />
    <p id="unknown">UNKNOWN NUMBER</p>

</div>

＆＃13;

＆＃13;

＆＃13;

实际上img代码需要margin-bottom: 40%，您需要0。

img#rcorners1{
 border-radius: 50%;
 background: #5A0065;
 margin:40% auto 0 auto; // margin-bottom: 0;
 display:block;
 width: 25%;
 height: 25%;
}