定位/對齊中間分子

這裏是我當前的標記：http://jsfiddle.net/LcMU3/64/。定位/對齊中間分子

我有問題的定位/對齊中的中間一列的元件。

首先，我要垂直對齊，中間的元素，也水平居中。

其次，我想「浮動」箭頭將「weekLabel」的左側和右側。

最終，它應該是這樣的：

enter image description here

其實我嘗試定位和調整嵌套3列布局的元素，但主要的問題我有這種做法的HTML標記難以跟隨所有的嵌套div。

希望得到任何幫助。

來源

2011-08-20 keruilin

你被允許重寫您的標記在這種情況下？ –

除了作爲一個display:inline-block由於div默認是display:block

.weekLabel{ 
    display:inline-block; 
    float:left; 
} 
.leftArrow { 
    display:inline-block; 
    float:left; 
} 

.rightArrow { 
    display:inline-block; 
    float:left; 
}

來源

2011-08-20 16:24:11

http://jsfiddle.net/LcMU3/67/

你必須給這些元素浮動：左;中心到weeklabel居中文本，和一些餘量以結束這一：併爲其分配文本對齊

來源

2011-08-20 16:05:18 vanErp

啊，很酷......爲什麼三個人離開了花車？這解決了定位問題...對齊如何？我可以在中間col類上使用line-height嗎？ – keruilin

左花車不必打算將東西放在左側。它只是意味着：將對象從左至右放置在一起。是的，你可以使用lineheight，但如果你將背景放在包裝上，你可以使它更容易，我會盡快爲你演示一個新的jsfiddle。 http://jsfiddle.net/LcMU3/68/ – vanErp

組合inline-block/vertical-align FTW：

.leftArrow,.rightArrow,.weekLabel { 
    display:inline-block; 
    vertical-align:middle; 
}

（提防#wrapper的寬度）

來源

2011-08-20 22:27:33 MatTheCat

定位/對齊中間分子

回答

相關問題