如何在不使用 display:table-cell 的情况下垂直对齐 DIV 内的文本答案

【问题标题】：How to vertically align the text inside a DIV without using display:table-cell如何在不使用 display:table-cell 的情况下垂直对齐 DIV 内的文本
【发布时间】：2014-02-14 17:41:51
【问题描述】：

我的要求：

我想创建一个垂直的左侧菜单，其中包含 SQUARE 菜单选项和居中文本，如下所示

到目前为止我的收获：

文本未垂直对齐！

HTML：

<div id="LeftMenu">
    <div class="LeftMenuItem">Invoices</div>
    <div class="LeftMenuItem">Expenses</div>
</div>

CSS：

html, body {
    height: 100% !important;
    width: 100% !important;
    margin: 0 !important;
    font-size:12px;
}
#LeftMenu {
    background-color: #0583c0;
    height: 100%;
    width: 8%;

}

.LeftMenuItem {
    border-bottom:1px;
    border-bottom-color:#00619e;
    border-bottom-style:solid;
    width: 100%;
    height: 0;
    color:White;
    text-align:center;
    vertical-align:middle;/* of course this doesnt work */
    padding-bottom:100%;

}
.LeftMenuItem:hover {
    background-color:#0095de;
}

JSFIDDLE：

http://jsfiddle.net/7U53M/

问题：

问题在于它没有垂直对齐文本:(

我尝试过的其他解决方案：

http://jsfiddle.net/XpL5U/

我尝试使用表格、表格行、表格单元格的显示。这确实使文本居中对齐，但现在使单元格与页面一样长。

约束：

我不想使用硬编码像素。我想使用百分比。

【问题讨论】：

你绝对反对用像素设置内容的高度吗？
@DanielLisik 当有动态选项时，以像素为单位对高度进行硬编码有什么好处？
更新了我的答案，现在适用于垂直居中的各种内容。

标签： html css

【解决方案1】：

当然，您可以使用行高，但仅当您有 1 行文本时才有效。这是一个更好的解决方案：

.element {
   position: relative;
   top: 50%;
   -webkit-transform: translateY(-50%);
       -ms-transform: translateY(-50%);
           transform: translateY(-50%);
}

您可以为.element 使用任何您想要的类名，然后将其添加到适当的项目中。你可以在这里阅读完整的文章：http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/

【讨论】：

我在我的小提琴中将它添加到了 LeftMenuItem 中，但它并没有奏效。我做错了什么？
当父元素有多个需要垂直居中的子元素时，这似乎效果不佳。否则，这是一个相当不错的技术。
你需要添加 -webkit- 前缀来转换以在 Chrome 中看到它：jsfiddle.net/XpL5U/2。这是一个很好的答案，具体取决于您的浏览器支持要求。
对不起，我没有在我的答案中添加前缀。我现在将对其进行编辑并添加它们。

【解决方案2】：

试试这个：

CSS

html, body {
    height: 100% !important;
    width: 100% !important;
    margin: 0 !important;
    font-size:12px;
}
#LeftMenu {
    background-color: #0583c0;
    height: 100%;
    width: 8%;
}
.LeftMenu_content {
    display: inline-block;
    vertical-align: middle;
}
.LeftMenuItem {
    border-bottom:1px;
    border-bottom-color:#00619e;
    border-bottom-style:solid;
    width: 100%;
    height:0;
    box-sizing:border-box;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    padding-bottom:100%;
    color:White;
    text-align:center;
}
.LeftMenuItem:before {
    content:"";
    display: inline-block;
    height: 100%;
    padding-bottom:100%;
    vertical-align: middle;
}
.LeftMenuItem:hover {
    background-color:#0095de;
}

HTML

<div id="LeftMenu">
    <div class="LeftMenuItem">
        <div class="LeftMenu_content">Invoices</div>
    </div>
    <div class="LeftMenuItem">
        <div class="LeftMenu_content">Expense</div>
    </div>
</div>

Fiddle

【讨论】：

几件事，单元格不再看起来是方形的，我看到 uve 使用 100px 作为硬编码的高度。我希望在没有像素数的情况下这样做
@SajjanSarkar 更新了答案。现在只需 % 作为高度，单元格应该是方形的。

【解决方案3】：

尝试更改 css 来自

.LeftMenuItem {
    border-bottom: 1px solid #00619E;
    color: #FFFFFF;
    height: 0;
    padding-bottom: 100%;
    text-align: center;
    vertical-align: middle;
    width: 100%;
}

到

.LeftMenuItem {
    border-bottom: 1px solid #00619E;
    color: #FFFFFF;
    padding: 20px 0;
    text-align: center;
    vertical-align: middle;
    width: 100%;
}

也许它会正常工作

【讨论】：

【解决方案4】：

square 要求强制你添加一个额外的元素。部分归功于 Kyle Shevlin 对变换的使用。

http://codepen.io/cimmanon/pen/rHbge

<div id="LeftMenu">
  <div class="LeftMenuItem">
    <div class="foo">Invoices</div>
  </div>
  <div class="LeftMenuItem">
      <div class="foo">Expenses
      <img src="http://placekitten.com/50/50" /></div>
  </div>
</div>

CSS：

html, body {
  height: 100% !important;
  width: 100% !important;
  margin: 0 !important;
  font-size: 12px;
}

#LeftMenu {
  background-color: #0583c0;
  height: 100%;
  width: 8%;
}

.LeftMenuItem {
  border-bottom: 1px;
  border-bottom-color: #00619e;
  border-bottom-style: solid;
  width: 100%;
  color: white;
  position: relative;
  text-align: center;
}
.LeftMenuItem:hover {
  background-color: #0095de;
}
.LeftMenuItem:before {
  display: block;
  padding-bottom: 100%;
  content: '';
}

.foo {
  position: absolute;
  top: 50%;
  width: 100%;
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  text-align: center;
}

【讨论】：

【解决方案5】：

从我在您的设计中看到的情况来看，指标几乎是固定的，所以为什么不提供大量的 padding-top（大约 70% 或 65px）来将文本准确地推送到您想要的位置。
当涉及到图像时，将其作为背景图像分配给.LeftMenuItem，定位为center 20%，大小为40px 40px

http://jsfiddle.net/AFLdc/

【讨论】：