Как вертикально выровнять текст внутри div без использования встроенной высоты

Question

В следующем примере я пытаюсь выравнивать текст по вертикали & по горизонтали.

почему-то не приходит правильно я попытался немного примеров также

http://jsfiddle.net/kayen/JBnbG/

Answer 1

Вот что вы можете сделать с помощью CSS & получить результат: http://jsfiddle.net/surendraVsingh/AMcnZ/31/

Удалить height из .boxcaption.

.boxcaption{ 
    float: left; 
    position: absolute; 
    background: #000; 
    width: 100%; 
    text-align:center; /*Add this*/ 
    padding:5px 0 0 0; /*Add this*/ 
    opacity: .6; 
    /* For IE 5-7 */ 
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=60); 
    /* For IE 8 */ 
    -MS-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; 
} 

Answer 2

вы можете добавить в свой CSS

text-align: center; 
line-height: 30px; 

http://jsfiddle.net/JBnbG/4/

Answer 3

демо http://jsfiddle.net/AMcnZ/22/

второй демо http://jsfiddle.net/AMcnZ/32/

.boxcaption{ 
     float: left; 
     position: absolute; 
     background: #000; 
     height: 25px; 
     width: 100%; 
     opacity: .6; 
     padding-top:3px; 
     text-align:center; 
     /* For IE 5-7 */ 
     filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=60); 
     /* For IE 8 */ 
     -MS-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; 
     }