顯示圖像而不會推下內容

我正在使用購買用於開發網站的模板，並且需要在頁面上插入圖像而不會將內容向下推。下面是鏈接到的網頁我的工作： 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

顯示圖像而不會推下內容

回答

相關問題