Question

我正在创建一个8项对齐的流畅宽度菜单，分为2行，中心文字和排水沟。

这意味着每行4个项目，宽度约为24％。排水沟是透明的。除了以包装的长菜单文本为中心外，一切都已到位。文本换行后，第二个文本行“落在”菜单项下方。

如何为菜单项设置某种行高，以便更长的文本被包裹但仍然是垂直居中的？

我在ul和li标签上都使用伪元素，但是如果有更好的解决方案（包括javascrip），我就会对它开放。没有菜单项长于2行，菜单将有较小屏幕的移动菜单解决方案。普通的浏览器支持和IE8 +

HTML是由WordPress生成的，所以不能改变太多。

下面的代码，图片和小提琴。

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

the menu

小提琴： 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

Answer 2

您的问题来自a：before元素的高度定义。我不知道用css解决这个问题的好方法。您要小心，内容不会超过一行，并使用当前代码或可能尝试一些js-magic，如果检测到超过特定文本长度的内容，则会更改DOM。

垂直居中的文本，8个项目对齐，流体宽度菜单，2行和排水沟

2 个答案: