CSS水平菜单问题 - 多行文本上的按钮答案

【问题标题】：CSS horizontal menu issue - buttons on multiple lines textCSS水平菜单问题 - 多行文本上的按钮
【发布时间】：2014-03-02 19:25:00
【问题描述】：

我有一个带有方形按钮的简单水平菜单，在多行上有文本。我希望它们显示为垂直居中。我尝试了许多解决方案，但似乎没有任何效果。这是代码，请随时编辑。保持按钮为方形，多行文本。

我希望黄色框中的文本位于黄色框的中间。垂直

HTML

<div>
  <ul>
    <li> <a href="#">Text1</a></li>    
    <li> <a href="#">Short</a></li>    
    <li> <a href="#">3 ROW THIS IS LONGER</a></li>    
    <li> <a href="#">2 ROWS TEXT</a></li>    
    <li> <a href="#">Text3</a></li>    
    <li> <a href="#">Text6</a></li>    
    <li> <a href="#">Text3</a></li>    
    <li> <a href="#">MORE TEXT HERE</a></li>    
  </ul>
</div>

CSS

div * {
  display:block;
  padding:0;
  margin:0;
}

ul{
  list-style-type:none;
  background-color:red;   
  width: 496px;
  height: 62px;
}

li{
  display:inline-block;
  width:62px;
  height:62px;
  text-align:center;
  background-color:green;
  float:left;
}

a{
  display:block;
  text-decoration:none;
  background-color:yellow;
  font-size:12px;
  text-transform:uppercase;
  font-family:Arial;
  width:58px;
  height:58px;
  padding:0px;
  margin:2px;
}

a:hover{
  background-color:white;
}

http://jsfiddle.net/58MyY/

谢谢

【问题讨论】：

你需要居中什么？文本？还是 div 本身？

标签： css button text menu

【解决方案1】：

正如 Dominick 所展示的那样，您可以使用 display: table-cell 和 vertical-align: middle 来达到目的。仅使用它的问题是您会丢失边距/填充

这是一个使用一些 div 包装器显示右边框和诸如此类的版本。

http://jsfiddle.net/58MyY/5/

编辑 >> 唉，我注意到悬停效果并不是你想要的li 元素内的链接。

【讨论】：

【解决方案2】：

我有点不确定你在描述什么，但我认为就是这样：

更新我想这就是他要找的东西。

您可以通过同时使用 display:table-cell 和 vertical-align:middle 轻松实现垂直对齐。

li{
   display:table-row;
}

a{
   display:table-cell;
   vertical-align:middle;
}

http://jsfiddle.net/58MyY/4/

【讨论】：

对不起，我没有解释清楚。这里是凌晨 4 点。我希望黄色框中的文本位于黄色框的中间。垂直
好的。将 li 设置为 table-row 并将 a 设置为 table-cell，然后设置 vertical-align:middle。这里：jsfiddle.net/58MyY/4
我把所有东西都准备好了。如果有人感兴趣，这里是完整的菜单：jsfiddle.net/58MyY/6

【解决方案3】：

我可以建议一个查看示例的好地方：http://www.cssplay.co.uk

【讨论】：