Well, considering this approach, you've made a mistake in your markup. The image shouldn't be nested in the #vertical_center
element. In other words, the #image
and #vertical_center
elements should be siblings, as follows:
<div id="img_holder">
<div id="vertical_center"></div>
<img id="image" src="http://placehold.it/200" />
</div>
Also, there would be a white space character between two inline-block
elements. You could remove that by setting the font-size
of their parent to 0
(or using an image replacement technique):
#img_holder {
font: 0/0 a;
/* other styles... */
}