CSS如何垂直对齐菜单的div浮动元素？答案

【问题标题】：CSS how to align vertically center div floating elements of menu?CSS如何垂直对齐菜单的div浮动元素？
【发布时间】：2015-02-20 20:08:43
【问题描述】：

我正在用 multiline 编写菜单。我将 div 容器和浮动 div 与 .这是代码：click for code on jsfiddle.net 或在此处查找代码：

<html>
<head>
    <style>
        #menu {
            width: 1000px;
            height: 55px;
            border: 1px solid green;
            background-color: green;
        }

        .element_menu {
            width: 100px;
            border: 1px solid red;
            float: left;
            text-align: center;
        }

        a {
            text-decoration: none;
            color: white;
            font-size: 11pt;
        }
    </style>
    <meta charset="utf-8"> 
</head>
<body>
    <div id="menu">
        <div class="element_menu"><a href="#">Strona<br />Główna</a></div>
        <div class="element_menu"><a href="#">Kontakt</a></div>
        <div class="element_menu"><a href="#">Tygodniowy plan<br />pracy</a></div>
    </div>
</body>

我想将菜单文本垂直居中对齐。如何做到这一点？

编辑：.element_menu 的边框用于测试。

【问题讨论】：

jsfiddle.net/42w0wde9/2 你想这样做吗？

标签： html css alignment center vertical-alignment

【解决方案1】：

在 element_menu 类中添加 display: table-cell 和 vertical-align:middle 并移除 float:left

代码 sn-p 在这里...

#menu {
  width: 1000px;
  height: 55px;
  border: 1px solid green;
  background-color: green;
}
.element_menu {
  width: 100px;
  border: 1px solid red;
  /*float: left;*/
  text-align: center;
  display: table-cell;
  vertical-align: middle;
}
a {
  text-decoration: none;
  color: white;
  font-size: 11pt;
}

<div id="menu">
  <div class="element_menu"><a href="#">Strona<br />Główna</a>
  </div>
  <div class="element_menu"><a href="#">Kontakt</a>
  </div>
  <div class="element_menu"><a href="#">Tygodniowy plan<br />pracy</a>
  </div>
</div>

希望这就是你要找的。p>

【讨论】：