html - div内块的垂直对齐中间

Question

我在使用 vertical-align: center for <p>inside时遇到问题<div>。没有什么要解释的，所以我只是链接 JSfiddle 我是 JSFiddle 链接

编辑：请记住有`

.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

演示

Answer 2

我添加了“位置：绝对；” 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.00 美元放在图像中间（我只是希望这是您想要的）。