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 + table-cell。由于table-cell具有vertical-align功能。

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

＆＃13;

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*/
}

＆＃13;

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

＆＃13;

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

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

＆＃13;

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*/
}

＆＃13;

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

＆＃13;

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>为纵向对齐，因此将您的CSS分解为li＆gt; a分为2个标记，如下所示：< / p>

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

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

3 个答案: