html - centering the div inside the div automatically -

html - centering the div inside the div automatically -

i have jsfiddle: click here

<div class="image-info"> <img id="cart-image" src="http://www.wonderoftech.com/wp-content/uploads/2013/07/blackberry-q10-sample-3-300x300.jpg"> <div class="pizza-hint">sample text</div> </div>

so in fiddle above can see when hover on div sample text not center horizontally tried margin auto didnt work.

my question how can center automatically when text length increasing?

like this:

demo

added stuff:

.image-info { position: relative; display: inline-block; <-added font-size: 0; <-added } div:hover .pizza-hint { display: block; position: absolute; top: 50%; <- changed left: 50%; <- changed border: 1px solid white; -ms-transform: translate(-50%,-50%); <- added -webkit-transform: translate(-50%,-50%); <- added transform: translate(-50%,-50%); <- added margin-left: 0; <- changed margin-right: 0; <- changed padding: 5px 5px 5px 5px; border-radius: 5px; background-color: rgba(227, 255, 255, 0.7); background: rgba(227, 255, 255, 0.7); }

html css