使用 CSS 难以定位图像

Posted 2023-05-09

【中文标题】使用 CSS 难以定位图像

【英文标题】：Difficulty positioning images using CSS

【发布时间】：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"   />
                    </span>

        <img src="http://i.stack.imgur.com/1KDly.gif"    />

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

    <div class="clip_frame centervertical">
      <span class="clip_frame center-top">
                    <img src="http://i.stack.imgur.com/kujPV.gif"   />
                </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"   />
                </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"   />
                    </span>

        <img src="http://i.stack.imgur.com/1KDly.gif"    />

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

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

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

注意我使用的实际徽标不是我在此处提供的徽标。它实际上是一个灰度 182x182 的 gif 图像。

【问题讨论】：

我认为可以使用top、bottom、right、left 值来修复它。

@Amitsingh - 谢谢阿米特，我已经尝试过了 - 没有区别，除非我做得不对......

你能为此设置一个小提琴吗？？

@ShowStopper - 如果你指的是 jsFiddle，我会看看我能做什么......

@Bill 如果你提供小提琴，我认为我可以帮助你

【参考方案1】：

替换您的 HTML 代码

<div class="middleContent">
                <div class="clip_frame centervertical">
                    <div style="width:500px;" class="clip_frame header-left">
                        <span class="">
                            <img    src="http://i.stack.imgur.com/YuJmJ.gif">
                        </span>

                        <img    src="http://i.stack.imgur.com/1KDly.gif">

                        <span style="top:-9px;position:relative;" class="">
                            <img    src="http://i.stack.imgur.com/YuJmJ.gif">
                        </span>
                    </div>
                </div>

                <div style=" height: 233px; margin-left: -14px; margin-right: -14px;  position: relative;  width: 220px;" class="clip_frame centervertical">
                    <span style="position: absolute; top: 0px; left: 1px;" class="">
                        <img    src="http://i.stack.imgur.com/kujPV.gif">
                    </span>

                    <span style="position: relative; top: 27px;" data-motopress-static-file="static/static-logo.php" data-motopress-type="static" class="clip_frame">
                        <img src="http://i.stack.imgur.com/fOmBd.gif">
                    </span>

                    <span style="bottom: 1px; position: absolute; left: 1px;" class="">
                        <img    src="http://i.stack.imgur.com/DpZ1l.gif">
                    </span>
                </div>

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

                        <img    src="http://i.stack.imgur.com/1KDly.gif">

                        <span style="top:-9px; position:relative;" class="">
                            <img    src="http://i.stack.imgur.com/YuJmJ.gif">
                        </span>
                    </div>
                </div>
            </div>

【讨论】：

感谢您的帮助！似乎解决了我的问题，只是它依赖于内联样式来实现结果。将寻求将内联样式转移到外部样式表。再次感谢您的帮助！

P.S.如果您可以在解决方案中包含整个解决方案/代码 sn-p 会很好，以便让遇到类似问题的下一个人更容易。这是我最新的小提琴的链接，可能有帮助，也可能没有帮助：jsfiddle.net/vasilios/057v26zv/6