脚注设计CSS:垂直对齐

Question

你好:我试图在CSS中添加脚注，我有以下CSS代码：

.post-content sup a.footnote {
    display: inline-block;
    margin-left: 5px;
    min-width: 16px;
    height: 16px;
    border-radius: 100%;
    border-bottom: none;
    padding: 1px 3px;
    background: #f4f5f6;
    font-size: 10px;
    text-align: center;
    color: #abb7b7
}

.post-content sup a.footnote:hover {
    background: #abb7b7;
    color: #fff
}

.post-content .footnotes {
    margin-top: 40px
}

@media only screen and (min-width:768px) {
    .post-content .footnotes {
        margin-top: 60px
    }
}

@media only screen and (min-width:1220px) {
    .post-content .footnotes {
        margin-top: 80px
    }
}

.post-content .footnotes ol {
    list-style: none;
    counter-reset: footnotes
}

.post-content .footnotes ol li {
    margin-top: 5px;
    font-size: 13px;
    counter-increment: footnotes
}

.post-content .footnotes ol li:before {
    content: counter(footnotes);
    box-sizing: border-box;
    display: inline-block;
    margin-right: 3px;
    width: 20px;
    height: 20px;
    border-radius: 100%;
    border-bottom: none;
    padding: 2px 3px;
    background: #f4f5f6;
    font-size: 11px;
    font-weight: 600;
    text-align: center;
    color: #abb7b7
}

.post-content .footnotes ol li p {
    display: inline;
    max-width: 100%;
    font-size: 13px
}

.post-content .footnotes ol li p a.reversefootnote {
    border-bottom: 0;
    vertical-align: sub
}

这样做的想法是，当我显示一个脚注时，数字会在一个圆圈中显示，它引用脚注，所以当我插入以下HTML代码时：

<p>Some text<sup id="fnref:1" role="doc-noteref"><a href="#fn:1" class="footnote">1</a></sup>.</p>

有以下脚注：

<div class="footnotes" role="doc-endnotes">
  <ol>
    <li id="fn:1" role="doc-endnote">
      <p>Some footnote.&nbsp;<a href="#fnref:1" class="reversefootnote" role="doc-backlink">↩</a></p>
    </li>
    ...
  </ol>
</div>

如我上文所述，脚注已予显示。然而，我最后得到了以下结果：

​

​

​

​

我如何修正它，使数字集中在圆圈上？

谢谢:)

这里有一个指向问题的链接：https://mianfg.me/2019/12/12/test

Answer 1

通过将直线高度设置为等于高度，文本将垂直位于中间。由于您也使用了text-align: center;，所以在本例中，这将处理水平对齐问题。

.post-content .footnotes ol li:before {
    content: counter(footnotes);
    box-sizing: border-box;
    display: inline-block;
    margin-right: 3px;
    width: 20px;
    height: 20px;
    line-height: 20px;
    border-radius: 100%;
    border-bottom: none;
    padding: 0 3px;
    background: #f4f5f6;
    font-size: 11px;
    font-weight: 600;
    text-align: center;
    color: #abb7b7
}