圍繞圖像中的CSS

我無法弄清楚如何在我的移動網站中心這個形象。圍繞圖像中的CSS

這裏是我使用的代碼，我在CSS初學者，所以我敢肯定，這是一個容易解決。只需要一些幫助。謝謝

#emotion-header-img { 
    display:none; 
} 
#emotion-header { 
    height:100px !important; 
    background-image:url("http://u.jimdo.com/www36/o/se9b04d2fd0388f99/emotion/orig/header.png") !important; 
    background-repeat:no-repeat !important; 
    background-size:contain !important; 
}

來源

2015-06-19 Brett Aistrope

首先，相關的HTML是什麼樣的？其次，你想要它垂直居中還是水平居中？ – Becuzz

所以你的意思是要對齊background-image？如果是的話，你可以使用background-position。例如：

#emotion-header { 
 
    width: 200px; 
 
    height: 200px; 
 
    border: 1px solid #ddd; 
 
    background-image: url("http://u.jimdo.com/www36/o/se9b04d2fd0388f99/emotion/orig/header.png"); 
 
    background-size: 100px; 
 
    background-repeat: no-repeat; 
 
    background-position: center; 
 
}

<div id="emotion-header"></div>

來源

2015-06-19 16:33:13

假設你想要的元素被水平居中和垂直以及：

/* generated from howtocenterincss.com, personally tried and tested! */

#emotion-header { 
 
     display:flex; 
 
     justify-content:center; 
 
     align-items:center; 
 
     /* height:100px !important; no need for this if you don't want to limit size*/ 
 
     background-repeat:no-repeat !important; 
 
     background-size:contain !important; 
 
} 
 

 
#emotion-header-img { 
 
    
 
     height: 100px; 
 
}

<div id="emotion-header"> 
 
    <img id="emotion-header-img" src="http://u.jimdo.com/www36/o/se9b04d2fd0388f99/emotion/orig/header.png" alt="image header" \> 
 
</div>

當然還有很多其他的可能性，並且事情會變得複雜當你想添加對IE7或IE8等舊瀏覽器的支持。在IE11之前，你需要使用表格單元格。 上面的代碼片斷適用於IE11與現代的瀏覽器。

我想在中心CSS東西的時候發現了一個相關的和良好的資源是howtocenterincss.com，生成根據您的設置，並選擇適合你的CSS。事實上，與Web應用程序的名稱相反，它也處理各種對齊。請注意，生成的代碼將嵌入在HTML元素中，使用<style>標記，您可以只提取這些樣式標記中的內容並移動到CSS文件以供使用。

來源

2015-06-19 17:00:06 matrixanomaly

圍繞圖像中的CSS

回答

相關問題