Div元素在另一個div元素

這是我的相關頁面標記中間不對齊Div元素在另一個div元素

#header { 
    width: 960px; 
    height: 110px; 
} 

#logo { 
    background: url('/assets/img/logo.png') no-repeat center; 
    width: 300px; 
    height: 110px; 
    float: left; 
} 


#user_box { 
    width: 300px; 
    height: 60px; 
    float: right; 
    vertical-align: middle; 
}

現在，我想定位user_box DIV中header div的垂直中間。經過很多谷歌和試驗，我發現這並不容易。顯然，我不能垂直對齊塊元素，如div。所以我正在尋找一種不同的方式來做到這一點。

我看到了hacky display: table;方法，並嘗試使用它，但它並沒有改變一件事。也嘗試將元素更改爲內聯元素，如span，但這也不起作用。我甚至嘗試使用margin: auto 0;來處理一些可怕的理由，而且這也根本不起作用。

所以我在尋求幫助。我如何垂直對齊我的頭div div中的這個div？

謝謝！

來源

2011-07-24 Josh

你想使用'顯示：表細胞;'代替，你可以將屬性'垂直對齊：中間;'css屬性，但是顯示類型混淆了很多東西。 – Purag

設置的user_box行高度等於header

工作演示的高度：http://jsfiddle.net/AlienWebguy/pyppD/

來源

2011-07-24 22:48:12 AlienWebguy

這隻會將'＃user_box'中的文本居中，而不是真正的div。請參閱：http://jsfiddle.net/pyppD/1/ – Josh

這就是'＃user_box'中的所有內容:) – AlienWebguy

垂直對齊不工作的div其對齊表格中的元素。你的情況，你可以只使用這個

#user_box { margin-top:25px; } /*110-60 = 50/2 = 25*/

來源

2011-07-24 22:52:16 Ehtesham

所以我擺弄周圍你的代碼一點點，這裏就是我的了：http://jsfiddle.net/3k8XE/

正如你可以看到我使用一個表作爲頭，並且將相同的id應用於每個元素，但兩個內部div除外都已更改爲td。我已經添加了一個內部td，以補償兩個div之間的空間，因爲它們最初設置爲float：left/right。

（當然邊界只是顯示什麼實際發生在這裏。）

來源

2011-07-24 23:01:18 Purag

Div元素在另一個div元素

回答

相關問題