Question

我正在使用购买的模板来开发网站，并且需要在页面上插入图像而不会将内容推下来。以下是我正在处理的页面的链接： http://www.onepropertyway.com/WorkOrder/default.aspx?woid=26&code=8lPRt3hxtg&vid=7

我最近在徽标中添加了以下div：

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

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

这是指向所需外观的链接： desired look

Answer 1

这是img容器：

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

这是css。这会将img置于菜单下方和水平线上方：

.imgContainer {
    display: flex;
    display: -webkit-box; 
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex; 
    justify-content: center;
}

从h2＆＃34; Word Order＃26＆＃34;中取出填充物。和标头一样。填充增加了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;
}

Answer 2

将此css提供给imgContainer类。

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

Answer 3

将此用于中心设置的图像

＆＃13;

.container{
position:relative;}
.absolute_logo{
width:200px;
height: 70px;
position:absolute;
left: 0;
right:0;
margin:auto;
top: -27px;
}
.absolute_logo img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
}

＆＃13;

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

＆＃13;

在不降低内容的情况下显示图像

3 个答案: