CSS vertical-align屬性不起作用

嘿，我有以下的CSS代碼：CSS vertical-align屬性不起作用

.parent 
{ 
    position : 'absolute'; 
    top : '50px'; 
    left : '50px'; 
    width : '400px'; 
    height : '160px'; 
    padding : '10px'; 
    border : '2px solid'; 
    border-color : '#444444'; 
    background-color : '#FF0000'; 
    text-align : 'center'; 
    /*display : inline; tried this also and didn't work.*/ 
} 

.child 
{ 
    color : '#123456'; 
    font-size : '16px'; 
    font-family : 'Arial'; 
    vertical-align : 'middle'; 
}

我只想把孩子的在中心父DIV的內容（x和y），但它不工作，它只顯示父元素頂端的文本。任何建議？謝謝。

來源

2013-04-25 Neo

爲什麼在所有屬性值附近有引號？ – Blender 2013-04-25 03:32:56

對不起，我只是做了一個我正在做的JavaScript課程的快速翻譯，並忘記取下它們。 – Neo 2013-04-25 03:34:28

vertical-align有一個騙人的名字。它實際上並不像你認爲的那樣垂直對齊元素。

如果您的孩子有文字只有一行，您可以使用line-height招居中：

.parent { 
    line-height: 160px; /* Height of the parent */ 
}

演示：http://jsfiddle.net/vVAdZ/

另一種方式是假表：

.parent { 
    display: table; 
} 

.child { 
    display: table-cell; 
    vertical-align: middle; 
}

演示：http://jsfiddle.net/vVAdZ/3/

來源

2013-04-25 03:35:55 Blender

我有3個div div內的父母，div父母有它的寬度/高度，我想把他們所有的父母div的中間。 – Neo 2013-04-25 03:39:57

完美！工作正常，（花了我幾個小時才找到解決方案哈哈）謝謝大家.. – Neo 2013-04-25 03:46:02

*旁註：*'display：table'將無法在IE7或更低版本上工作。 – Raptor 2013-04-25 04:07:35

失去報價在你的CSS屬性值，並添加line-height: 160px;到.parent

來源

2013-04-25 03:36:22

採取任何的寬度，在這種情況下是400，和2的div半分。然後取高度的一半160，用高度的一半除以2，你應該得到中心。

來源

2013-04-25 03:36:24 user2277872

CSS vertical-align屬性不起作用

回答

相關問題