中心DIV當被定位爲絕對，並且在DIV中改變內容時

我有一個網站，我在網站上有垂直和水平居中的div。它的當前內容是並且因此居中工作水平。如果我改變內容，我將不得不編輯width到它的寬度和margin-left到一半寬度。隨着內容每次進入網站時都會改變，這將無法正常工作，我需要一個解決方案。中心DIV當被定位爲絕對，並且在DIV中改變內容時

我該如何解決？我可能檢測到文本的寬度並設置width & margin-left與js或jQuery？

#output { 
    position: absolute; 

    top: 50%; 
    margin-top: -160px; 

    color: #6FA673; 
    font: 200pt Aleo; 
    font-weight: bold; 
    left: 50%; 

    width: 296px; 
    margin-left: -148px; 
}

謝謝！

編輯： 這是一個JSFiddle爲你們！與25號完美搭配，但其他任何東西都會稍微偏離垂直。

JSFiddle!

來源

2013-06-21 Magnus Burton

你可以做一個jsfiddle.net或codepen.io，用你的HTML和CSS請:) –

@GCyrillus增加了的jsfiddle，感謝您的快速反應！ –

我剛纔看到您的jsfiddle，同時，我做了HTML/CSS的東西，試圖找出你看什麼（我simlar到收藏夾:)）

http://codepen.io/anon/pen/dgKls

從你的jsfiddle 這個？http://jsfiddle.net/b4TTK/13/

#output, html, body { 

    height:100%; 

    width:100%; 

    margin:0; 

    display:table; 

} 

body { 

    display:table-cell; 

    vertical-align:middle; 

    text-align:center; 

} 

#output { 

    position: absolute; 

    color: #6FA673; 

    font: 200pt Arial; 

    font-weight: bold; 

    line-height:0 

}

不是流體雖然

來源

2013-06-21 16:11:25

不是最短的解決方案，但它應該做什麼。謝謝！ :) –

如果你唯一擔心的是，保證金左必須是1/2 contanier的寬度，可以使用以下命令：

$('#output').css('marginLeft', '-'+$('#output').width() /2+'px');

，當然還有

width: auto;

來源

2013-06-21 16:00:34 Ohgodwhy

我可能沒有在問題中解釋得很清楚。我需要檢測文本的寬度，然後設置寬度和頁邊空白值。感謝您的代碼，當我檢測到寬度時會很有用。 –

你說......

如果我更改了內容，我將不得不將寬度編輯爲它的寬度，並將寬度保留爲寬度的一半。

...不，你不必這樣做。你只需要一個更好的CSS解決方案。另一種方法是簡單地將內容居中，而不管文本內容多長或短。然後，你就不必擔心撰寫的js代碼來檢測它的CSS屬性...

的CSS：

#output { 
     position: relative; 
     top: 50%; 
     margin:0 auto; 

     text-align:center; 
     color: #6FA673; 
     font: 200pt Arial; 
     font-weight: bold; 
    }

而且我fiddle

更新您可以垂直對齊你的頁面加載元素用簡單的jQuery方法...

JS：

var mtop = $(window).height()/2; 
$('#output').css({top: mtop});

來源

2013-06-21 16:09:39 blackhawk

由於位置設置爲相對，它不是垂直居中div，感謝您的偉大答案。 –

對，查看我的更新 – blackhawk

中心DIV當被定位爲絕對，並且在DIV中改變內容時

回答

相關問題