html - 如何将段落设置到图像底部？

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 中，我放置了图像并尝试将段落底部放置在图像上，但即使我给 ma​​rgin 0% auto;

也占用了很长的空间

这是 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" />

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>

实际上 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%;
}