CODEWITHSUNDEEP
htmlcssalignment
Filip Bartuzi
Filip Bartuzi

Reputation: 5931

Center block (paragraph) inside div

There is example in JsFiddle .

Small description: Div is 300x300 but might be 500x500 or 100x100 in future (so need flexible solution) with background image (which is size:cover so don't care about size).

Inside this div there is <p> with hight of 50px (but might be 100px or 25px in future) which has text inside (20) and background-color that is a bit transparent (blue).

I want to center it inside this div and sollution should be flexible (so for future changes it won't be take a few hours to fix all images/ideas manually, so it would be cool to use % values.

Has anyone an idea?

Upvotes: 0

Views: 266

Answers (4)

Arun Bertil
Arun Bertil

Reputation: 4648

    .cover-price{
    height: 300px;
    width: 300px;
    background-repeat: no-repeat;
    background-size: cover;
    display:table-cell; vertical-align:middle;
}

Upvotes: 0

Srihari
Srihari

Reputation: 766

Have you tried Span and normal padding??

<p><span class="price">20.0 </span></p>

.cover-price p{
line-height: 50px;
width: 100%;
height: 50px;
/*background-color: rgba(43,32,122, .3);*/
color: pink;
padding-top : 45%;
position: relative;
}

.price{
background-color: rgba(43,32,122, .3);
}

http://jsfiddle.net/BZGhU/13/

Upvotes: 0

PSL
PSL

Reputation: 123739

One way:

.cover-price{
    height: 300px;
    width: 300px;
    background-repeat: no-repeat;
    background-size: cover;
    position:relative; /*Make container relative*/
}

.cover-price p{
    line-height: 50px;
    width: 100%;
    height: 50px;
    background-color: rgba(43,32,122, .3);
    color: pink;
    position:absolute; /*make P absolute*/
    top: calc(50% - 50px); /*give top as 50% - height of p*/
}

Fiddle

Using calc since you have specified css3 in tags

If not using calc for lack of support below IE9 the you can specify the top value as height of the container/2-height of para i.e here top: 100px;

Upvotes: 3

Orangepill
Orangepill

Reputation: 24655

You should be able to just add display:table-cell; vertical-align:middle; to your cover price class.

Upvotes: 0

Related Questions