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

Question

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

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://whosebug.com">text1</a>
      </li>
      <li class="leaf2">
        <a href="http://whosebug.com">text2</a>
      </li>
      <li class="leaf3">
        <a href="http://whosebug.com">text3</a>
      </li>
      <li class="leaf4">
        <a href="http://whosebug.com">text4</a>
      </li>
      <li class="leaf5">
        <a href="http://whosebug.com">text5</a>
      </li>
    </ul>
  </div>
</div>

Answer 1

您可以使用 CSS table + table-cell。由于 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://whosebug.com">text1</a>
      </li>
      <li class="leaf2">
        <a href="http://whosebug.com">text2</a>
      </li>
      <li class="leaf3">
        <a href="http://whosebug.com">text3</a>
      </li>
      <li class="leaf4">
        <a href="http://whosebug.com">text4</a>
      </li>
      <li class="leaf5">
        <a href="http://whosebug.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://whosebug.com">text1</a>
      </li>
      <li class="leaf2">
        <a href="http://whosebug.com">text2</a>
      </li>
      <li class="leaf3">
        <a href="http://whosebug.com">text3</a>
      </li>
      <li class="leaf4">
        <a href="http://whosebug.com">text4</a>
      </li>
      <li class="leaf5">
        <a href="http://whosebug.com">text5</a>
      </li>
    </ul>
  </div>
</div>

Answer 2

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

告诉 <li> 显示为 table 然后你可以告诉 <a> 在其中垂直对齐，所以将你的 CSS 分开li>a 分成 2 个标签：

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

Answer 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;
  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://whosebug.com"><span>text1<br />text1.1</span></a> <!-- wrap your text in a span -->
      </li>
      <li class="leaf2">
        <a href="http://whosebug.com"><span>text2</span></a>
      </li>
      <li class="leaf3">
        <a href="http://whosebug.com"><span>text3</span></a>
      </li>
      <li class="leaf4">
        <a href="http://whosebug.com"><span>text4</span></a>
      </li>
      <li class="leaf5">
        <a href="http://whosebug.com"><span>text5</span></a>
      </li>
    </ul>
  </div>
</div>

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

Vertical align link text in a percentage height list

css

height

vertical-alignment