Центральный блок (абзац) внутри div

Question

Пример: JsFiddle.

Краткое описание: Div является 300x300, но может быть 500x500 или 100x100 в будущем (так нужно гибкое решение) с background image (который size:cover так что не беспокоится о размере).

Внутри div есть <p> с Hight из 50px (но может быть 100px или 25px в будущем), который имеет текст внутри (20) и background-color, который немного прозрачный (синий).

Я хочу, чтобы центрировать его в этом div и гуманном должен быть гибкими (так что для изменения в будущем он не будет занять несколько часов, чтобы исправить все изображения/идеи вручную, так что было бы здорово использовать % значения.

кто-нибудь идею

Answer 1

Один из способов:.

.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

Использование выч, так как вы определили CSS3 в тегах

Если не используется известково из-за отсутствия поддержки ниже IE9 В общем, вы можете указать верхнее значение как height of the container/2-height of para т.е. здесь top: 100px;

Answer 2

Вы должны быть в состоянии просто добавить display:table-cell; vertical-align:middle; в свой ценовой категории покрытие

Answer 3

Вы пробовали Span и нормальное дополнение?

<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/

Answer 4

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