Question

所以我试着得到2个div容器，它们都应该包含居中的文本（x轴和y轴）。

感谢Google和stackoverflow，我偶然发现了一些使用vertical-align等的解决方法。但似乎没什么用。

#right-menu {
    position: absolute ;
    right: 0% ;
    top: 0% ;
    height: 100% ;
    width: 5% ;
    text-align:  center ;
    background: #ededed ;
        display: table-cell;

vertical-align: middle ;

这是一个小提琴：

http://jsfiddle.net/7Rgvs/

Answer 1

首先，您必须首先将CSS元素的父元素定义为表，然后才能将其子元素显示为表格单元格。

例如，

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

查看此链接，它会澄清您的查询.. http://css-tricks.com/vertically-center-multi-lined-text/

Answer 2

如果您使用vertical-align，那么

Vertical-align:middle属性不会与position:absolute;一起使用：中间然后尝试此布局修改后的布局 http://jsfiddle.net/7Rgvs/5/

Answer 3

使用display：table作为（holder＃left-menu element）和 display：内部holder元素的table-cell并使用以下样式：

#left-menu .inner {
    display: table-cell;
    margin: 0 auto;
    text-align: center;
    vertical-align: middle;
    width: 100%;
}

我编辑了小提琴内的左侧菜单： http://jsfiddle.net/7Rgvs/

<div> </div>中的垂直文本中心

3 个答案: