Html 如何水平对齐不同宽度的链接，以响应背景图像？ 嗨，亲爱的斯塔克斯，

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

想象一下以下链接的处理：

我想我可以使用3个不同的div元素，例如，包含one元素的元素的宽度为100%，包含两个元素的元素的宽度为50%，包含三个元素的元素的宽度为33%。

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

当前HTML

编辑：到目前为止，我几乎做到了我想要的，除了每个链接的垂直位置，它不在各自圆的中心，而是在它的上边缘。

---

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

链接标签如何处理？它们是否固定并将适合该圆圈？我希望图像与浏览器的窗口大小相适应，并且与图像大小无关，我希望链接保持在每个灰色圆圈的中心，如我提供的图像所示。我已经尝试了一些代码，可以与您共享，我将尽快编辑我的问题！问题更新-添加了HTML、CSS和当前结果。链接标签如何？它们是否固定并将适合该圆圈？我希望图像与浏览器的窗口大小相适应，并且与图像大小无关，我希望链接保持在每个灰色圆圈的中心，如我提供的图像所示。我已经尝试了一些代码，可以与您共享，我将尽快编辑我的问题！问题更新-添加HTML、CSS和当前结果。

<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>

.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;
}