超大列表光盘未在中间垂直对齐

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

Answer 2

有一个简单的解决方法。只需添加position:relative属性。

a {
    position:relative;
    top:-7px;
}