<div> 中的垂直文本中心答案

【问题标题】：vertical text center in <div><div> 中的垂直文本中心
【发布时间】：2012-06-18 09:32:47
【问题描述】：

所以我正在尝试获取 2 个 div 容器，它们都应该包含居中的文本（x 轴和 y 轴）。

感谢 Google 和 stackoverflow，我偶然发现了一些与垂直对齐等有关的解决方法。但似乎没有任何效果。

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

【问题讨论】：

标签： html alignment center

【解决方案1】：

Vertical-align:middle 属性不与position:absolute; 一起使用如果您使用的是垂直对齐：中间然后尝试这个布局修改布局 http://jsfiddle.net/7Rgvs/5/

【讨论】：

【解决方案2】：

基本上，首先您必须将父元素定义为 CSS 中的表格，然后您可以将其子元素显示为表格单元格。

例如，

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

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

【讨论】：

【解决方案3】：

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

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

我已经在您的小提琴中编辑了左侧菜单： http://jsfiddle.net/7Rgvs/

【讨论】：