CODEWITHSUNDEEP
htmlcssvertical-alignment
Filip Bartuzi
Filip Bartuzi

Reputation: 5931

Vertical-align middle for block inside div

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.

Upvotes: 0

Views: 1727

Answers (2)

user2403316
user2403316

Reputation: 198

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).

Upvotes: 0

Bhojendra Rauniyar
Bhojendra Rauniyar

Reputation: 85653

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

Demo

Upvotes: 1

Related Questions