Css 在不按下内容的情况下显示图像

我使用的模板是购买来开发一个网站，需要插入一个页面上的图像，而不推下的内容。以下是我正在处理的页面的链接：

我最近添加了以下带有徽标的div：

<div style="margin-left:-20px; display:inline; *zoom:1;text-align:center">
<img src="/uploads/logos/8_100h.gif">
</div>`

`

如您所见，页面的内容被向下推。我希望这个图片出现在中间的绿色菜单和水平线之间，而不需要按下任何内容。我也尝试过使用z-index，但也不起作用。我相信这对于一个经验丰富的CSSer来说是非常简单的，但不幸的是，这不是我

以下是指向所需外观的链接：

---

这是img容器：

<div class="imgContainer">
    <img src="/uploads/logos/8_100h.gif">
</div>

去掉h2“单词顺序#26”和标题的填充，如下所示。填充是在h2上方和菜单下方添加空间。这将删除填充：

header, h2 { //probably better if you make classes for these elements so you can target them
 padding: 0;
} 

您可能需要添加如下类：

<header class="headerClass">......</header>

<h2 class="workorder">Work Order #26</h2>

.headerClass {
    padding-bottom: 0;
}


.workorder {
    padding-top: 0;
}

。。。。。。
工作指令#26
.人头类{
填充底部：0；
}
.工作单{
填充顶部：0；
}

将此css交给

imgContainer

类

.imgContainer {
  height: 100px;
  left: 0;
  margin: auto;
  position: absolute;
  right: 0;
  text-align: center;
  top: -23px;
}
.row_6 {      
   position: relative;
}

---

将此选项用于中心的图像集

.container{
位置：相对；}
.绝对标志{
宽度：200px；
高度：70像素；
位置：绝对位置；
左：0；
右：0；
保证金：自动；
顶部：-27px；
}
.绝对标志img{
最大宽度：100%；
最大高度：100%；
宽度：自动；
高度：自动；
}

请提供您想要的任何屏幕截图。请参阅我添加的链接。请先决定是否要在

img

标记中使用图像或

背景图像

，因为每次我重新加载页面img时，要么是

img

标记，要么是

背景图像

。我有一个打字错误。flex属性需要位于imgContainer类上。我更新了答案这个有效吗？显示：-webkit flex；是的，这是为safari和旧的chrome支持需要去掉h2/标题的填充。这个解决方案的HTML是什么样子的？我已经添加了代码。请在代码中添加这个css。我检查了你的页面，它工作得很好。是的，工作得很好…我需要宽度吗？…我只是问，因为图像将是动态的。是的，请给出任何特定的宽度，因为每当图像尺寸较大时，它会自动调整。高度将始终为100px，但宽度可能会改变。

.imgContainer {
  height: 100px;
  left: 0;
  margin: auto;
  position: absolute;
  right: 0;
  text-align: center;
  top: -23px;
}
.row_6 {      
   position: relative;
}