Question

我的要求：

我想创建一个带有SQUARE菜单选项的垂直左侧菜单，其中心文本是这样的 enter image description here

到目前为止我得到了什么：

文字未垂直对齐！

Textt Not vertically aligned

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/

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

约束：

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

Answer 1

试试这个：

<强> 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

Answer 2

当然你可以使用行高，但只有在有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/

Answer 3

从我在设计中看到的情况来看，指标几乎是固定的，所以为什么不给出大量的padding-top（类似于70％，或65px）来将文本准确推送到您想要的位置它是。
当谈到图像时，将其作为背景图像分配到.LeftMenuItem，定位center 20%和尺寸40px 40px

http://jsfiddle.net/AFLdc/

Answer 4

尝试改变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%;
}

可能会正常工作

Answer 5

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;
}

如何在不使用display：table-cell的情况下垂直对齐DIV中的文本

5 个答案: