在wordpress中添加图标进行缩放后，图像不会对齐

我在我的图片中放了一个放大镜图标，上面有我在这个网站上找到的代码。代码工作得很完美，问题是现在我无法再将图像对齐到中心和右侧，因为父元素需要浮动：左侧，我如何解决这个问题

    <a href="#" class="gallerypic">
      <img src="[url]" width="32" height="32" class="ALIGNRIGHT/ALIGNCENTER">
      <span class="zoom-icon"></span>
    </a>

a.gallerypic{
  text-decoration:none;
  position:relative;
  display:block;
  border:1px solid #666;
  float:left;
}

a.gallerypic span.zoom-icon{
  visibility:hidden;
  position:absolute;
  left:40%;
  top:35%;
  filter:alpha(opacity=50);
  -moz-opacity:0.5;
  -khtml-opacity: 0.5;
  opacity: 0.5;
}

a.gallerypic:hover span.zoom-icon{
  visibility:visible;
}

a、 画廊图片{
文字装饰：无；
位置：相对位置；
显示：块；
边框：1px实心#666；
浮动：左；
}
a、 gallerypic span.zoom-icon{
可见性：隐藏；
位置：绝对位置；
左：40%；
最高：35%；
过滤器：α（不透明度=50）；
-moz不透明度：0.5；
-khtml不透明度：0.5；
不透明度：0.5；
}
a、 gallerypic：悬停span.zoom-icon{
能见度：可见；
}