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

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内，我放置了图像并试图将段落的底部放置在图像上，但是即使我给margin 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%;
}