html - 垂直居中文本，8 项对齐，2 行和间距的流体宽度菜单

Question

我在 2 行中创建了一个 8 项对齐的流体宽度菜单，文本和间距居中。

这意味着每行 4 个元素，宽度约为 24%。排水沟是透明的。除了居中环绕的长菜单文本外，一切都已到位。一旦文本换行，第二个文本行就会“落在”菜单项下方。

如何为菜单项设置某种行高，以便较长的文本被换行但仍垂直居中？

我在 ul 和 li 标签上都使用了伪元素，但如果有更好的解决方案(包括 javascrip)我愿意接受。没有菜单项超过 2 行，并且菜单将具有适用于较小屏幕的移动菜单解决方案。普通浏览器支持和IE8+

HTML 是由 WordPress 生成的，因此不能对其进行太多更改。

下面的代码、图像和 fiddle 。

HTML:

<div id="wrapper">
    <ul >
        <li><a href="#">Normal text</a></li>
        <li><a href="#">Normal text</a></li>
        <li><a href="#">Normal text</a></li>
        <li><a href="#">Normal text</a></li>
        <li><a href="#">Longer text Longer text Longer text</a></li>
        <li><a href="#">Normal text</a></li>
        <li><a href="#">Normal text</a></li>
        <li><a href="#">Normal text</a></li>
    </ul>
</div>

CSS:

#wrapper {
    max-width: 1000px;
    background: grey;
}

ul {
    text-align: justify;
    -ms-text-justify: distribute-all-lines;
    text-justify: distribute-all-lines;
    padding: 0;
    margin: 0;
    font-size: 0.1px;
}

ul:after {
    content: '';
    width: 100%;
    display: inline-block;
    font-size: 0;
    line-height: 0
}

li {
    width: 24%;
    height: 100px;
    vertical-align: top;
    display: inline-block;
    *display: inline;
    zoom: 1
    border: 1px solid black;
    background-color: #ddd;
    font-size: 22px;
    color: #000000;
    margin-bottom: 1%;
    text-align: center;
}

li a {
    text-decoration: none;
}

li a:before {
    content: '';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
    line-height: 1px;
    text-align: center;
}

fiddle : http://jsfiddle.net/A347a/

Answer 1

对于这样的结构，我会使用表格，这样更方便:

HTML

<table id="wrapper">
    <tbody >
        <tr>
          <td><a href="#">Normal text</a></td>
          <td><a href="#">Normal text</a></td>
          <td><a href="#">Normal text</a></td>
          <td><a href="#">Normal text</a></td>
        </tr>
        <tr>
          <td><a href="#">longer text longer text longer text</a></td>
          <td><a href="#">Normal text</a></td>
          <td><a href="#">Normal text</a></td>
          <td><a href="#">Normal text</a></td>
        </tr>
    </tbody>
</table>

CSS

#wrapper {
    col {
        max-width: 250px;
    }
    background: grey;
    border-spacing:0;
    border-collapse:collapse;
}

tbody {
    text-align: justify;
    -ms-text-justify: distribute-all-lines;
    text-justify: distribute-all-lines;
    padding: 0;
    margin: 0;
    font-size: 0.1px;
}


td {
    width: 25%;
    height: 100px;
    vertical-align: middle;
    background-color: #ddd;
    font-size: 22px;
    color: #000000;
    margin-bottom: 1%;
    text-align: center;
    border: 1px solid black;
}

li a {
    text-decoration: none;
}

Fiddle