div中的块的垂直对齐中间

Question

我在<p>内<div>的vertical-align：center遇到问题。没有什么可以解释所以我只是链接JSfidle I'm JSFiddle link

编辑：请记住有“

.cover-price p{

    width: 100%;
    height: 50px;
    background-color: rgba(0,0,0, .3);`

所以价格有一个小黑背。

Answer 1

将display: table;用于主div，将display: table-cell; vertical-align: middle;用于p

Demo

Answer 2

我添加了“position：absolute;”属性值到css表以及“margin-top：170px;（相对于成像div效果为170）

.cover-price{
    height: 300px;
    width: 300px;
    background-repeat: no-repeat;
    background-size: cover;
    *position:absolute;*
}
.cover-price p{
    margin: auto 0;
    width: 100%;
    background-color: rgba(0,0,0, .3);
    color: white;
    *margin-top:170px;*
}

让我知道这是否有帮助。当然，这是将20美元放在图像中间（我希望这就是你想要的）。