5

嘿，我有以下 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），但它不起作用，它只显示父元素顶部的文本。有什么建议吗？谢谢你。

4

3 回答 3

15

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-25T03:35:55.977 回答
2

丢失 CSS 属性值中的引号并添加line-height: 160px;到 .parent

于 2013-04-25T03:36:22.557 回答
2

取任何宽度，在本例中为 400，除以 2 得到一半的 div。然后取一半高度 160，除以 2 得到一半高度，你应该得到中心。

于 2013-04-25T03:36:24.920 回答