html - div 内のブロックの中央を垂直方向に揃える

Question

vertical-align: center for <p>inside に問題があり<div>ます。説明することはこれ以上ないので、リンクするだけです JSfiddle I'm 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

「position:absolute;」を追加しました "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 を画像の中央に配置することです (それがあなたの望むものであることを願っています)。