絕對中心元素不知道它的高度

-1

我需要居中元素（垂直和水平），雖然我知道它的寬度，它的高度可能會改變。絕對中心元素不知道它的高度

我搜索了Google整個上午，我發現的一切似乎都說我需要知道身高。

是否有一個jQuery的方法，我可以使用，我並不真的要開始使用table-cell財產

2013-05-15 Dean Elliott

你有沒有試過自己？你甚至有任何標記工作？ – George

你能請一個小提琴的例子嗎？ –

此問題在過去受到嚴重關注，例如http://stackoverflow.com/questions/396145/whats-the-best-way-of-centering-a-div-vertically-with-css/6182661#6182661 as由@The Mechanic指出 –

您可以使用jQuery.outerHeight動態獲取元素的高度屬性。

來源

2013-05-15 10:19:07 doublesharp

你可以使用：

$("#whatever").height();

它會告訴您該對象的高度。如果它改變了，那麼你可以再次調用它並重新居中。

來源

2013-05-15 10:20:33 PhonicUK

使用CSS，它可能與flexible boxes，但它不能在IE工作尚未：

.container{ 
    display: flex; 
    min-height: 100%; /* <- or whatever height the container has */ 
} 

.centered{ 
    margin: auto;  
}

(fiddle)

來源

2013-05-15 10:25:28

那不起作用，即 –

是的，我已經注意到了答案。然而，[IE 10中的彈性支持]（http://msdn.microsoft.com/en-us/library/ie/hh772069（v = vs.85）.aspx），但它似乎居中不起作用某些原因 –

IE10支持以前版本的Flexbox（2012年3月草案）。您的演示有一個moz前綴，但Firefox只支持標準屬性中帶有前綴或無前綴的舊2009屬性（直到v22，才能啓用實驗性Flexbox支持）。 https://gist.github.com/cimmanon/727c9d558b374d27c5b6 – cimmanon

你不需要任何JS這個這是非常簡單的

*請注意，這將與img類似的對象，它有固定的高度和寬度，但不知道給我們和文本您需要使用js運行它跨瀏覽器正確

看看這個小提琴http://jsfiddle.net/Ukvfw/ 與更小的圖像相同的代碼http://jsfiddle.net/Ukvfw/1/

這裏是代碼

HTML - （你可以改變圖像鏈接和任何高度和寬度試試）

<div class="parent"> 
    <img class="child" src="http://wiki.guildwars.com/images/thumb/6/60/User_Jette_awesome.svg/2048px-User_Jette_awesome.svg.png" /> 
</div>

CSS -

.parent{ 
width:300px; 
height:300px; 
position:relative; 
border:1px solid red; 
padding:10px; 
} 

.child{ 
position: absolute; 
top:0; 
left:0; 
right:0; 
bottom:0; 
margin:auto; 
max-height:300px; 
max-width:300px; 
}

來源

2013-05-15 10:28:14

[不真的工作]（http://jsfiddle.net/7XcCP/）:)注意OP不知道寬度 –

不工作普遍這個只有你可以在你的情況下使用技巧 –

您可以在此閱讀起來關於使用div標籤進行垂直居中的小文章。看看這個鏈接http://www.jakpsatweb.cz/css/css-vertical-center-solution.html 的同時檢查這個類似的問題 How to vertically center a div for all browsers?

來源

2013-05-15 10:51:14

<table style="width: 100%; height:100%;"> 
<tr> 
<td style="text-align: center; vertical-align: middle;"> 
     /*code here*/ 
</td> 
</tr> 
</table>

我覺得這是最「一般&全地形」的方式。

來源

2013-05-15 10:52:45 Sergio

絕對中心元素不知道它的高度

回答

相關問題