Question

In the following example i am trying to align the text in middle vertically & horizontally.

For some reason it doesn’t come up correctly i tried few example also

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

Answer 1

Here is what you can do with your CSS & get the result: http://jsfiddle.net/surendraVsingh/AMcnZ/31/

Remove height from .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)";
}