div内块的垂直对齐中间

Question

I'm having trouble with vertical-align: center for <p> inside <div> . There is nothing more to explain so I just link JSfidle I'm JSFiddle link

edit: please remember that there is `

.cover-price p{

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

so there is a small blackbackground for price.

Answer 1

Use display: table; to your main div and display: table-cell; vertical-align: middle; display: table-cell; vertical-align: middle; to your p

Demo

Answer 2

i added the "position:absolute;" attribute-value to the css sheet along with a "margin-top:170px; (which effects 170 in relation to the imaged div)

.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;*
}

let me know if this helps at all. This is, of course, placing the $20.00 in the middle of the image (i just hope that's what you want).