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属性不起作用

回答

相关问题