代码之家 › 专栏 › 技术社区 › Iva_Only_Java

如何在两个html图像之间放置链接?

css html

Iva_Only_Java · 技术社区 · 2 年前

我对html/css完全陌生,所以我对一个问题有点困惑。我有一个html/css文件,其中包含一组不同的链接和两个图像。我需要这样定位他们:

这可能是一项容易的任务,但对于像我这样的乞丐来说,这似乎太难了。我在网上浏览过如何做这件事,但显然没有什么适合我的。我唯一能做的就是将一个图像放在左边,并将链接放在该图像的中心,但这不是我想要的。感谢您的帮助! 代码如下:

<div class="container-fluid text-center">
    <h1>Text</h1>
    <div class="flex-box">
        <img src="/image.png">
        <img src="/image2.png">
        <div class="text-center">
            <a class="h2" th:href="@{/states}">Link1</a>
        </div>
        <div class="text-center">
            <a class="h2" th:href="@{/capitals}">Link2</a>
        </div>
        <div class="text-center">
            <a class="h2" th:href="@{/events}">Link3</a>
        </div>
        <div class="text-center">
            <a class="h2" th:href="@{/wars}">Link4</a>
        </div>
        <div class="text-center">
            <a class="h2" th:href="@{/figures}">Link5</a>
        </div>
        <div class="text-center">
            <a class="h2" th:href="@{/governors}">Link6</a>
        </div>
        <div class="text-center">
            <a class="h2" th:href="@{/statistics}">Link7</a>
        </div>
    </div>
</div>

1 回复 | 直到 2 年前

Aaron Meese 2 年前

您可以随时使用 display: flex ,我制作了一个JSFIDLE来为您演示它 here .

代码:

#container {
  display: flex;
  flex-direction: row;
  width: 100%;
  justify-content: space-around;
}

#text-container a {
  display: block;
}

<div id="container">
  <img src="https://via.placeholder.com/150" />
  <div id="text-container">
    <a href="https://google.com">Link 1</a>
    <a href="https://google.com">Link 2</a>
    <a href="https://google.com">Link 3</a>
  </div>
  <img src="https://via.placeholder.com/150" />
</div>