CSS vertical-align属性不工作 [英] CSS vertical-align property doesn't work

问题描述

嘿，我有以下CSS代码：

Hey there I have the following CSS code:

.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';
}

我只想把孩子的内容放在中心（x和y）的父div，但它不工作，它只显示我的父元素的顶部的文本。任何建议？谢谢。

I just want to put the child's content in the center (x and y) of the parent div, but it's not working, it only shows me the text in the top side of the parent element. Any suggestion? thank you.

推荐答案

vertical-align 有一个欺骗名称。

如果你的孩子只有一行文本，你可以使用 line-height 把它置中：

If your child has only one line of text, you can use the line-height trick to center it:

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

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

Demo: http://jsfiddle.net/vVAdZ/

另一种方法是伪造表：

.parent {
    display: table;
}

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

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

Demo: http://jsfiddle.net/vVAdZ/3/

这篇关于CSS vertical-align属性不工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！