html - 脚注设计 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">↩&lt;/a></p>
    </li>
    ...
  </ol>
</div>

脚注如我上面解释的那样显示。但是，我最终得到以下结果：

如何修复它以使数字以圆圈为中心？

谢谢 ：）

这是该问题的链接：https ://mianfg.me/2019/12/12/test

标签： htmlcss

Answer 1

通过将 line-height 设置为等于高度，文本现在将垂直居中。由于您还使用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
}