html - 超大列表圆盘未在中间垂直对齐

Question

我有一个简单的无序列表，其中圆盘为 list-type。我想使光盘变大，所以我放大了 ul 的字体大小。但是，现在圆盘没有与文本在中间垂直对齐。

我做错了什么？

SEE FIDDLE

<div>
    <ul>
        <li><a href="#">Lorem ipsum</a></li>
        <li><a href="#">Lorem ipsum</a></li>
        <li><a href="#">Lorem ipsum</a></li>
    </ul>
</div>

ul  {list-style: disc;font-size: 260%;}
a   {font-size: 16px;
     line-height: 40px;
     display: inline-block;
     padding: 10px;
     margin: 5px 10px 5px 0;
     border:1px solid green}

Answer 1

一种解决方案是使用伪元素before:

.stops      {}
.stops ul   {list-style-type: none;}
.stops li   {}
.stops a        {font-size: 16px;
line-height: 40px;
display: inline-block;
padding: 10px;
margin: 5px 10px 5px 0;
border:1px solid green}
li:before {content:"·";font-size:120px;vertical-align:middle;line-height:20px;}

不必使用 list-style: disc 但 content:"." 并调整字体大小使其看起来像大圆盘。

fiddle