嘿,我有以下 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
有一个欺骗性的名字。它实际上并不像您想象的那样垂直对齐元素。
如果您的孩子只有一行文字,您可以使用line-height
将其居中的技巧:
.parent {
line-height: 160px; /* Height of the parent */
}
Demo: http://jsfiddle.net/vVAdZ/ http://jsfiddle.net/vVAdZ/
另一种方法是伪造一个表:
.parent {
display: table;
}
.child {
display: table-cell;
vertical-align: middle;
}
Demo: http://jsfiddle.net/vVAdZ/3/ http://jsfiddle.net/vVAdZ/3/
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)