使用CSS难以定位图像

Question

我在使用CSS定位（或更准确地说，组合）各种图形图像以形成一个完整图像时遇到困难。我这样做的原因是（最终），当我将它们正确放置在我正在构建的网站的标题中时，我将能够使用缓动CSS动画将它们组合在一起。

更大的图片包含以下图片图片：

我希望它看起来像这样：

使用下面的CSS，它看起来像这样：

这是CSS和HTML代码：

＆＃13;

＆＃13;

.clip_frame
/* used to clip the contents as in the case of an image frame */

{
  overflow: hidden;
}
.middleContent {
  text-align: center;
  position: relative;
}
.middleContent > img {
  display: inline-block;
}
.centervertical {
  display: inline-block;
  vertical-align: middle;
}
.header-left {
  float: left;
  margin-left: 0;
  position: relative;
}
.header-left-top {
  vertical-align: top;
  position: absolute;
}
.header-left-bottom {
  vertical-align: bottom;
  position: absolute;
}
.header-right {
  float: right;
  margin-right: 0;
  position: relative;
}
.header-right-top {
  vertical-align: top;
  margin-top: 0;
  position: absolute;
}
.header-right-bottom {
  vertical-align: bottom;
  margin-bottom: 20;
  position: absolute;
}
.center-top {
  text-align: center;
  vertical-align: top;
}
.center-top > img {
  display: inline-block;
  position: absolute;
  z-index: 1;
}
.center-bottom {
  text-align: center;
  vertical-align: bottom;
}
.center-bottom > img {
  display: inline-block;
  position: absolute;
  z-index: 2;
}

＆＃13;

<?php /* Wrapper Name: Header */ ?>. . .
<div class="row">
  <div class="middleContent">
    <div class="clip_frame centervertical">
      <div class="clip_frame header-left">
        <span class="clip_frame header-left-top">
                        <img src="http://i.stack.imgur.com/YuJmJ.gif" alt="" width="500" height="6px"/>
                    </span>

        <img src="http://i.stack.imgur.com/1KDly.gif" alt="" width="500" height="80" />

        <span class="clip_frame header-left-bottom">
                        <img src="http://i.stack.imgur.com/YuJmJ.gif" alt="" width="500" height="6px"/>
                    </span>
      </div>
    </div>

    <div class="clip_frame centervertical">
      <span class="clip_frame center-top">
                    <img src="http://i.stack.imgur.com/kujPV.gif" alt="" width="238" height="70"/>
                </span>

      <span class="clip_frame" data-motopress-type="static" data-motopress-static-file="static/static-logo.php">
                    <img src="http://i.stack.imgur.com/fOmBd.gif">
                </span>

      <span class="clip_frame center-bottom">
                    <img src="http://i.stack.imgur.com/DpZ1l.gif" alt="" width="238" height="70"/>
                </span>
    </div>

    <div class="clip_frame centervertical">
      <div class="clip_frame header-right">
        <span class="clip_frame header-right-top">
                        <img src="http://i.stack.imgur.com/YuJmJ.gif" alt="" width="500" height="6px"/>
                    </span>

        <img src="http://i.stack.imgur.com/1KDly.gif" alt="" width="500" height="80" />

        <span class="clip_frame header-right-bottom">
                        <img src="http://i.stack.imgur.com/YuJmJ.gif" alt="" width="500" height="6px"/>
                    </span>
      </div>
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

我已嵌入到PHP标头包装器中：

请注意，我使用的是WordPress的Cherry Framework，因此定义了＆＃39;行＆＃39;类选择器不是由我正在开发的主题定义的。然而，它的目的是将文本/图像垂直对齐成表的行，这显然是Cherry Framework用来构造每个页面的标题。尽管如此，我认为这不应该干扰我想要实现的目标。如果我错了，请纠正我....任何建议和/或反馈，包括关于使用缓动css动画的建议，将不胜感激。

N.B。我使用的实际徽标不是我在这里提供的徽标。它实际上是一个灰度182x182 gif图像。