El codigo es bueno, el problema es que las imágenes tienen distintos tamaños... Así que no sabría bien al momento de centrar si quedará bien en algunas y en otras mal.
El codigo segundo lo agregue pero las imágenes dejaron de visualizarse, no entiendo la razón.
Yo antes tenía un código que me ayudaba a solucionar esto, el problema es que ya no lo manejo porque todo lo hago en mysql. No sabría pasarlo a mysql ya que contiene un montón de código innecesario.
Código:
<div id="bleftsmall" style="background:url(http://i.imgur.com/OC25b0X.png);">
<div class="content monosub">
<div style="float:left;background:url(URL) no-repeat 50px;width:290px;height:132px;font-family:Ubuntu;font-weight:400;font-size:16px;color:#939393;position:relative;">
<div style="max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border:1px solid silver;padding:6px;position:absolute;-webkit-border-radius: 4px;-moz-border-radius: 4px;border-radius: 4px;background-color: rgba(255,255,255,0.80);"><b>NOMBRE CUALQUIERA</b></div>
<div class="infobox radius" style="top:0px;right:0px;">
<div style="float:left;color:silver;font-family:Ubuntu;font-size:14px;"></div><div style="float:left;color:#4CAC27;font-family:Ubuntu;font-size:14px;margin:0px 2px; 0px 2px;"><div style="float:right;padding-left:21px;background:url(http://i.imgur.com/0YlbPMd.png) no-repeat;">999999</div></div><div style="clear:both;"></div><hr><div style="float:left;color:#FF8000;font-family:Ubuntu;font-size:14px;margin:0px 2px; 0px 2px;"><div style="float:right;padding-left:22px;background:url(http://i.imgur.com/mK8zcjv.png) no-repeat;">999999</div></div></div>
<div style="position:absolute;bottom:5px;right:0px;"></div>
</div>
</div>
</div>
Ese sería el php. El css es todavía más desordenado.
Código:
#bleftsmall{-moz-border-radius:5px;border-radius:5px;background-color:#FFF;float:left;margin:10px 0px 5px 10px;width:304px;height:autopx;border:1px solid silver;}
.monosub{padding:5px 3px 5px 6px;}