如何水平对齐不同宽度的链接，对背景图像做出响应？

Question

Heya亲爱的堆叠器，

我需要制作一个网页，我的图片上方有9个链接 有了这个background我正在使用，我打算让它响应，以及每个灰色圆圈上方的链接。

想象一下以下链接＆＃39;处理：

我想我可以使用3个不同的 div 元素，例如，包含一个元素的元素将具有宽度：100％，包含两个元素的宽度为50％，包含三个元素的元素的宽度为：33％。

所有这一切，都在主div元素中，背景图像和固定的宽度和高度（与图像的大小相同）。

  

当前HTML

<div class="list-part">
        <ul>
            <li id="w1"><a href="~/parceiros.cshtml">Parceiros</a></li>
            <li id="w2"><a href="~/phc-cs.cshtml">PHC CS</a></li>
            <li id="w2"><a href="~/phc-fx.cshtml">PHC FX</a></li>
            <li id="w3"><a href="~/consultoria.cshtml">Consultoria</a></li>
            <li id="w3"><a href="~/suporte.cshtml">Suporte</a></li>
            <li id="w3"><a href="~/desenv.cshtml">Desenvolvimento</a></li>
            <li id="w2"><a href="~/formacao.cshtml">Formação</a></li>
            <li id="w2"><a href="~/soltec.cshtml">Soltec</a></li>
            <li id="w1"><a href="~/financiamento.cshtml">Financiamento</a></li>
        </ul>
</div>

  

当前CSS

.list-part {
margin-top: 100px;
width: 672px;
height: 667px;
background: url(../media/solucoes_logo.jpg) no-repeat center;
background-size: contain;
}

.list-part ul {
    width: 100%;
    padding: 0;
}

    .list-part ul li {
        list-style: none;
    }

        .list-part ul li a {
            color: red;
            text-decoration: none;
        }

            .list-part ul li a:hover {
                color: red;
            }

#w1 {
width: 100%;
height: 133px;
}

#w2 {
width: 48%;
height: 133px;
display: inline-block;
}

#w3 {
width: 33%;
height: 133px;
display: inline-block;
}

编辑：到目前为止，我几乎按照我的意图行事，除了每个链接的垂直位置，它不在其各自的圆圈的中心，而是在它的上边缘。

  

Result

如何按照背景图像的响应性处理图像显示的链接？