【发布时间】：2015-11-18 16:18:08
【问题描述】：
我在使用 CSS 定位（或者更准确地说，组合）各种图形图像以形成一个完整图像时遇到困难。我这样做的原因是（最终），当我将它们正确放置在我正在构建的网站的标题中时，我将能够使用缓动 CSS 动画将它们组合在一起。
大图由以下图形图像组成：
我希望它看起来像这样：
使用下面的 CSS，它看起来像这样：
这是 CSS 和 HTML 代码：
.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;
}<?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>我已嵌入到 PHP 标头包装器中：
请注意，我使用的是 WordPress 的 Cherry 框架，因此“行”类选择器的定义不是由我正在开发的主题定义的。然而，它的目的是将文本/图像垂直对齐到表格的行中，显然 Cherry Framework 使用它来构建每个页面的标题。尽管如此，我不认为这会干扰我想要实现的目标。如果我错了，请纠正我....任何建议和/或反馈，包括有关使用缓动 css 动画的建议，将不胜感激。
注意我使用的实际徽标不是我在此处提供的徽标。它实际上是一个灰度 182x182 的 gif 图像。
【问题讨论】：
-
我认为可以使用
top、bottom、right、left值来修复它。 -
@Amitsingh - 谢谢阿米特，我已经尝试过了 - 没有区别，除非我做得不对......
-
你能为此设置一个小提琴吗？？
-
@ShowStopper - 如果你指的是 jsFiddle，我会看看我能做什么......
-
@Bill 如果你提供小提琴，我认为我可以帮助你
标签： jquery html css wordpress image