如何動態中心圖片（網站橫幅）

我目前有一個網站rinique.com。我希望動態對中的網站橫幅是基於屏幕大小（例如iphone和ipad）的帶有單詞「RINIQUE」的圖像。如何動態中心圖片（網站橫幅）

目前爲了使它成爲中心，我已經把絕對值。以下是我的CSS的片段。

#header #logo { 
    float: left; 
    position: relative; 
    left: 38%;

來源

2013-07-04 Jun Hao

爲什麼使用JavaScript，如果你能使用簡單的CSS？

#logo { 
display: block; 
text-align: center;

}

只是做一個＃標誌表現爲一個塊元素，並調整它的內容IMG中心。

http://jsfiddle.net/brutusmaximus/N9XtP/

來源

2013-07-04 13:50:26 brutusmaximus86

+1。最好和最簡單的解決方案:)我喜歡你的頭像 –

簡單和整潔的解決方案。謝謝您的幫助 –

-1

嘗試是沿着這個片段的jQuery的行：

$('#logo').css("top", Math.max(0, (($(window).height() - $(this).outerHeight())/2)) + "px"); 
    $('#logo').css("left", Math.max(0, (($(window).width() - $(this).outerWidth())/2)) + "px");

來源

2013-07-04 13:47:12

爲什麼使用JavaScript如果可以輕鬆地用css完成？ –

我以爲他也想垂直居中，這是我能想到的最簡單的方法。 –

對於這個jQuery是矯枉過正的，一個簡單的CSS更改將使其工作，正如各種答案中所述。 –

#logo { 
    margin: auto; /* this requires the element to be block-level with a set dimension (i.e., not width: auto) */ 
    width: 300px; /* or whatever width your asset is */ 
    display: block; /* <a/> elements are inline by default */ 
}

來源

2013-07-04 13:51:24

嘗試移除的CSS項，並添加這一項。

#logo > img { 
    display: block; 
    margin-left: auto; 
    margin-right: auto; 
}

來源

2013-07-04 13:53:37 amamut

如何動態中心圖片（網站橫幅）

回答

相關問題