在flexbox布局中垂直居中链接文本

Question

我有一个由5个链接组成的菜单。我需要每个链接为可用宽度的33％，链接之间的间距。水平和垂直间距必须相同。

链接必须与该行中最高链接的高度相同，即使链接文本的长度因链接而异。理想情况下，所有链接都是相同的高度，但我怀疑这是可能的。

链接文字是动态的，会发生变化。这适用于响应式网站，因此页面宽度会有所不同。

我根本无法更改HTML。

这适用于仅限移动设备的网站，所以我不需要担心旧浏览器。我应该没问题使用flexbox。

<ul>
    <li>
        <a href="#">
            <span>Link 1</span>
        </a>
    </li>
    <li>
        <a href="#">
            <span>Link 2 has much longer text than the other links</span>
        </a>
    </li>
    <li>
        <a href="#">
            <span>Link 3</span>
        </a>
    </li>
    <li>
        <a href="#">
            <span>Link 4</span>
        </a>
    </li>
    <li>
        <a href="#">
            <span>Link 5</span>
        </a>
    </li>
</ul>

我的代码在Chrome中工作正常。我还需要做的唯一事情是将链接文本垂直居中（见下图）。

align-items：center属性看起来很有前途但是如果我将它应用到ul那么lis'停止在相同的高度。

*, *:before, *:after {
    -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
 }

ul {
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  width: 50%;
  border: 2px solid black;
  margin: auto;
}

li {
  list-style-type: none;
  float: left;
  width: 32%;
  background: grey;
  text-align: center;
  overflow: hidden;
  margin-bottom: 2%;
  vertical-align: middle;
}

li:nth-of-type(2),
li:nth-of-type(5)
{
  margin-left: 2%;
  margin-right: 2%;
}

a {
  display: inline-block;
  margin: -10em;
  padding: 10em;
}
a {
  background: gold;
}
a:hover {
  background: green;
}

http://codepen.io/anon/pen/CeiqK

Answer 1

我不知道我在这里发布的解决方案是否对您有效。无论如何，我改变了你的css以获得它：

ul {
  margin: 0;
  padding: 0;
  width: 50%;
  border: 2px solid black;
  margin: 0 auto;
  font-size: 0;  /* this fix inline-block margins */
}

li {
  font-size: 14px;
  list-style-type: none;
  display: inline-block;
  width: 32%;
  min-height: 34px;
  background: grey;
  text-align: center;
  overflow: hidden;
  margin-bottom: 2%;
}

a {
  display: table-cell;
  width: 100em;
  height: 34px;
  vertical-align: middle;
}

<强> Check it at codepen

创建此：