Div over image Bootstrap 3

Question

Snippet based on http://jsfiddle.net/evJRm/ (Hover image - display div over it)

The problem is, when the window resizes, the text and the image get seperated from each other (the image starts on a new line). How do I fix this?

<div class="container">
    <div class='img-container'>
        <div class='img-text'>text</div>
        <img style='margin-top:10px;' width='150' height='225' src='http://img14.imageshack.us/img14/9698/29588166.jpg' />
    </div>
    <div class='img-container'>
        <div class='img-text'>text</div>
        <img style='margin-top:10px;' width='150' height='225' src='http://img14.imageshack.us/img14/9698/29588166.jpg' />
    </div>
    <div class='img-container'>
        <div class='img-text'>text</div>
        <img style='margin-top:10px;' width='150' height='225' src='http://img14.imageshack.us/img14/9698/29588166.jpg' />
    </div>
</div>

.img-container{
    width:150px;
    height:225px;
    position: relative;
    display: inline;
    margin:5px;
}
.img-text{
    top:20px;
    width:150px;
    height:50px;
    margin-left:15px;
    position: absolute;
    background-color: yellow;
    display:block;
}

jsfiddle: http://jsfiddle.net/w23ch/

Answer 1

You can change display: inline to display: inline-block for the image container and update the positioning accordingly.

The height and width won't affect inline elements, which makes it difficult to get a correct positioning.

DEMO

.img-container{
    width:150px;
    height:225px;
    position: relative;
    display: inline-block;
    margin:5px;
}
.img-text{
    top:50%;
    width:150px;
    height:50px;
    margin-top: -25px;
    position: absolute;
    background-color: yellow;
    display:block;
}