動態內容的自動中心

你好我正在使用WP主題來居中內容我必須編輯填充左，因爲我們不知道內容區域的寬度，因爲動態取決於屏幕分辨率的變化。動態內容的自動中心

問題是，由於不同的瀏覽器有不同的滾動寬度，有時沒有滾動很難把「填充左」和媒體查詢計算出一個完美的中心位置。

我知道不同的方法，如邊距：0自動，絕對位置或內聯塊，在其他情況下，總是工作。

但是在這個時候我需要一些Javascript來計算屏幕分辨率和屏幕上的內容，所以填充可以動態地改變爲一個完美的中心。

該網站的鏈接是：http://www.fanonfire.com/magazine/

現在不集中，但你可以檢查我們用來中心網址是什麼：

.content_area {padding: 10px 0 0px 107px;}

改變過去的一些具有不同media_queries。但是這不會產生一個真正的中心位置，並且是非常緩慢的過程。所以我不知道是否可以用Javascript來做到這一點，並根據屏幕生成自動填充。

謝謝！

編輯：我這個嘗試沒有沒有運氣（謝謝ProllyGeek）

var main_width=parseInt($("#main").width()) // get main width var content_width=parseInt($(".content_area").width()) // get content area width var my_padding=((main_width-content_width)/2).toString() $(".content_area").css("padding-left",my_padding+"px") //set padding to the desired element

來源

2013-11-24 MZBS

我建議你熟悉以下材料：

http://www.demtron.com/blog/post/2009/01/14/Centering-a-DIV-Window-with-Cross-Browser-JavaScript.aspx

來源

2013-11-24 14:58:19

罰款，如果你想用jquery這樣做這裏是一個快速的僞代碼

var container_width=parseInt($("#container").width()) // get container width 
var content_width=parseInt($("#content").width()) // get content area width 

var my_padding=((container_width-content_width)/2).toString() 


$("#content").css("padding-left",my_padding+"px") //set padding to the desired element

http://jsfiddle.net/LmBRp/3/

如果你想看到它居中替換填充左邊緣左邊。

來源

2013-11-24 15:07:12 ProllyGeek

謝謝，但與我使用的實際模板我不能使用絕對位置。我需要一些東西，而不必更改模板的所有代碼，以根據屏幕大小動態更改「填充左側」。謝謝！ – MZBS

這是使用jquery完成它的最簡單的方法。 – ProllyGeek

謝謝，類似的東西是應該如何工作的。然而，我試圖將這些代碼添加到我的header.php中，並使用正確的類名（編輯了），但仍然沒有做任何事情。任何想法？ – MZBS

我也有這個問題試圖在幻燈片放映中不同長度的標題。

要將具有動態寬度的絕對定位元素居中，可以使用transform：translateX。使用前綴可以在大多數現代瀏覽器中使用。像這樣：

div { 
    width: auto; 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    -webkit-transform: translateX(-50%); 
    -moz-transform: translateX(-50%); 
    -ms-transform: translateX(-50%); 
    -o-transform: translateX(-50%); 
    transform: translateX(-50%); 
}

來源

2015-10-07 16:58:01 StefanBob

動態內容的自動中心

回答

相關問題