在百分比高度列表中垂直对齐链接文本

Question

我想在<li> 列表中垂直对齐链接文本。我尝试了几种方法，但找不到解决方案。我必须保持百分比高度。

我的代码示例版本：https://jsfiddle.net/kr0mf4oe/3/

div#html {
  height: 500px;
}
div#main {
  display: block;
  height: 100%;
  background-color: blue;
}
ul#list {
  height: 100%;
  background-color: green;
}
ul#list>li {
  height: 20%;
  border-width: 2px;
  border-bottom: 2px white solid;
}
li>a {
  height: 100%;
  display: block;
  text-align: center;
}

<div id="html">
  <div id="main">
    <ul id="list">
      <li class="leaf1">
        <a href="http://stackoverflow.com">text1</a>
      </li>
      <li class="leaf2">
        <a href="http://stackoverflow.com">text2</a>
      </li>
      <li class="leaf3">
        <a href="http://stackoverflow.com">text3</a>
      </li>
      <li class="leaf4">
        <a href="http://stackoverflow.com">text4</a>
      </li>
      <li class="leaf5">
        <a href="http://stackoverflow.com">text5</a>
      </li>
    </ul>
  </div>
</div>

Answer 1

您可以使用 CSS 表格 + 表格单元格。由于 table-cell 具有vertical-align 功能。

ul#list>li {
  display: table;
  width: 100%;
}
ul#list>li>a {
  display: table-cell;
  vertical-align: middle;
}

div#html {
  height: 500px;
}
div#main {
  display: block;
  height: 100%;
  background-color: blue;
}
ul#list {
  height: 100%;
  background-color: green;
  list-style: none; /*added*/
  padding-left: 0; /*added*/
}
ul#list>li {
  height: 20%;
  border-width: 2px;
  border-bottom: 2px white solid;
  display: table; /*added*/
  width: 100%; /*added*/
}
ul#list>li>a {
  height: 100%;
  text-align: center;
  display: table-cell; /*added*/
  vertical-align: middle; /*added*/
}

<div id="html">
  <div id="main">
    <ul id="list">
      <li class="leaf1">
        <a href="http://stackoverflow.com">text1</a>
      </li>
      <li class="leaf2">
        <a href="http://stackoverflow.com">text2</a>
      </li>
      <li class="leaf3">
        <a href="http://stackoverflow.com">text3</a>
      </li>
      <li class="leaf4">
        <a href="http://stackoverflow.com">text4</a>
      </li>
      <li class="leaf5">
        <a href="http://stackoverflow.com">text5</a>
      </li>
    </ul>
  </div>
</div>

您也可以使用 CSS3 flexbox，justify-content:center 用于水平居中，align-items:center 用于垂直居中。

ul#list>li>a {
  display: flex;
  justify-content: center;
  align-items: center;
}

div#html {
  height: 500px;
}
div#main {
  display: block;
  height: 100%;
  background-color: blue;
}
ul#list {
  height: 100%;
  background-color: green;
  list-style: none; /*added*/
  padding-left: 0; /*added*/
}
ul#list>li {
  height: 20%;
  border-width: 2px;
  border-bottom: 2px white solid;
}
ul#list>li>a {
  height: 100%;
  display: flex; /*added*/
  justify-content: center; /*added*/
  align-items: center; /*added*/
}

<div id="html">
  <div id="main">
    <ul id="list">
      <li class="leaf1">
        <a href="http://stackoverflow.com">text1</a>
      </li>
      <li class="leaf2">
        <a href="http://stackoverflow.com">text2</a>
      </li>
      <li class="leaf3">
        <a href="http://stackoverflow.com">text3</a>
      </li>
      <li class="leaf4">
        <a href="http://stackoverflow.com">text4</a>
      </li>
      <li class="leaf5">
        <a href="http://stackoverflow.com">text5</a>
      </li>
    </ul>
  </div>
</div>

Answer 2

如果不想使用表格，也可以这样：

div#html{
  height:500px;
}

div#main{
  display:block;
  height:100%;
  background-color:blue;
}

ul#list{
  height:100%;
  background-color:green;
}

ul#list>li{
  height:20%;
  border-width: 2px;
  border-bottom: 2px white solid;
  position: relative; /* new */
}

li>a{
  height:100%;
  display:block;
  text-align:center;
}
li>a>span{ /* new */
  position: absolute;
  width: 100%;
  left: 0;
  top: 50%;
  -webkit-transform: translateY(-50%);
}

<div id="html">
  <div id="main">
    <ul id="list">
      <li class="leaf1">
      <a href="http://stackoverflow.com"><span>text1<br />text1.1</span></a> <!-- wrap your text in a span -->
      </li>
      <li class="leaf2">
        <a href="http://stackoverflow.com"><span>text2</span></a>
      </li>
      <li class="leaf3">
        <a href="http://stackoverflow.com"><span>text3</span></a>
      </li>
      <li class="leaf4">
        <a href="http://stackoverflow.com"><span>text4</span></a>
      </li>
      <li class="leaf5">
        <a href="http://stackoverflow.com"><span>text5</span></a>
      </li>
    </ul>
  </div>
</div>

Answer 3

您是否希望文本在作为列表元素的绿色框内垂直对齐？如果是这样：

告诉<li> 显示为表格，然后你可以告诉其中的<a> 垂直对齐，因此将 li>a 的 CSS 拆分为 2 个标签，如下所示：

li{
  height:100%;
  width: 100%;
  display:table;
  text-align:center;
  padding-top: 20px;
}
li a {
  display: table-cell;
  vertical-align: middle;
}