显示图像而不会推下内容
我正在使用购买用于开发网站的模板,并且需要在页面上插入图像而不会将内容向下推。下面是链接到的网页我的工作: 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
给这个css来imgContainer
类。
.imgContainer {
height: 100px;
left: 0;
margin: auto;
position: absolute;
right: 0;
text-align: center;
top: -23px;
}
.row_6 {
position: relative;
}
此解决方案的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;
}
不适用于我... – 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>
设置请提供你怎么想任何截图? –
查看我添加的链接。 http://www.onepropertyway.com/WorkOrder/desired.jpg – ftbadolato
请首先决定你想要在'img'标签还是'background-image'中成像,因为每次我重新加载页面img来'img'标签或'背景-image'。 –