CSS：无法在框中垂直对齐文本

Question

我正在显示一系列像<li>s这样的框：

我希望文本在框中垂直居中，但正如您所看到的那样，它们太低了。这是我的HTML：

<div class="pagelinks">
  <ul>
    <a href="#"><li>1</li></a>
    <a href="#"><li>2</li></a>
    ...
    <a href="#"><li>6</li></a>
  </ul>
</div>

和我的CSS：

.pagelinks { float:right; margin:0; }
.pagelinks li {
    display:inline-block;
    width:20px;
    height:15px;
    border:2px solid #394E7E;
    margin:0;
    font-weight:bold;
    text-align:center;
}
.pagelinks a, .pagelinks a:hover { text-decoration:none; }

我已经查看了vertically-align，但我认为它会与<li>中的<ul>对齐，而不是<li>中的文字。

我该如何解决这个问题？

PS：在对类似问题的接受回答中，建议使用<sub>/<sup>，但我确信不的方式。

Answer 1

使用line-height。

li{
   line-height:15px; // the hight of the li
}

<强> DEMO

Answer 2

将line-height: 15px;添加到您的li类

<强> FIDDLE

Answer 3

您发布的示例格式不正确的HTML。 <a>标记应位于<li>内。

另外，从<li>元素中删除高度，然后使用line-height标记上的<a>。

JSFiddle Example