显示图像而不会推下内容

我正在使用购买用于开发网站的模板，并且需要在页面上插入图像而不会将内容向下推。下面是链接到的网页我的工作： 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

来源

2017-11-11 ftbadolato

设置请提供你怎么想任何截图？ –

查看我添加的链接。 http://www.onepropertyway.com/WorkOrder/desired.jpg – ftbadolato

请首先决定你想要在'img'标签还是'background-image'中成像，因为每次我重新加载页面img来'img'标签或'背景-image'。 –

给这个css来imgContainer类。

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

来源

2017-11-11 04:51:09

此解决方案的HTML看起来像什么？ – ftbadolato

我已经添加了代码，请在您的代码中添加此CSS。我已经检查了你的页面，它的工作原理非常完美。 –

是的，作品...我需要的宽度？...我只问，因为图像将是动态的。 – ftbadolato

这里是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“字顺序＃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; 
}

来源

2017-11-11 04:43:47

不适用于我... – ftbadolato

http://www.onepropertyway.com/WorkOrder/default.aspx?woid=26&code=8lprt3hxtg&vid=7 – ftbadolato

我有一个错字。 flex属性需要位于imgContainer类上。我更新了答案 –

使用这种图像在中心

.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; 
 
}

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

来源

2017-11-11 04:55:11 Gattbha

显示图像而不会推下内容

回答

相关问题