html – CSS vertical-align属性不起作用

嘿,我有以下CSS代码:

.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),但它不起作用,它只显示父元素顶部的文本.有什么建议吗?谢谢.

vertical-align有一个欺骗性的名字.它实际上并不像您认为的那样垂直对齐元素.

如果您的孩子只有一行文字,您可以使用行高技巧将其居中:

.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/

相关文章
相关标签/搜索