需要帮忙！试图将导航链接放在图像下方

Question

我一直在努力让我的 link 文本位于我的图片下方并使它们正确居中。一整天都在来回奔波，毫无进展。我被困住了，现在真的不知道如何继续，我们将不胜感激任何帮助

这就是我想要的样子

结果是这样

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  background: #181818;
  font-size: 18px;
  font-family: 'Poppins';
}

li, a {
  text-decoration: none;
  color: white;
}

ul {
  list-style: none;
}

.navbar {
  display: flex;
  width: 800px;
  height: 60px;
  margin: auto;
  justify-content: space-between;
  align-items: center;
}

.navbar a{
  text-transform: uppercase;
}

.navbar-images {
  width: 800px;
  display: flex;
  justify-content: space-between;
  margin: auto;
}

.navbar-images img{
  width: 3em;
}

    <div class="navbar-images">
        <img src="images/Home.png" alt="">
        <img src="images/Home.png" alt="">
        <img src="images/Home.png" alt="">
        <img src="images/Home.png" alt="">
        <img src="images/Home.png" alt="">
    </div>
    <div class="navbar">
        <a href="#">home</a>
        <a href="#">about</a>
        <a href="#">skills</a>
        <a href="#">portfolio</a>
        <a href="#">contact</a>
    </div>

Answer 1

你好

你能试试这个 CSS 代码吗？

<div class="navbar">
  <div class="navlink">
    <img src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Ftse1.mm.bing.net%2Fth%3Fid%3DOIP.1KqykzD2MTsvHS3z3elm0QHaE9%26pid%3DApi&f=1"  alt="">
    <a href="#">home</a>
  </div>
    <div class="navlink">
    <img src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Ftse1.mm.bing.net%2Fth%3Fid%3DOIP.1KqykzD2MTsvHS3z3elm0QHaE9%26pid%3DApi&f=1"  alt="">
      <a href="#">about</a>
  </div>
  <div class="navlink">
    <img src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Ftse1.mm.bing.net%2Fth%3Fid%3DOIP.1KqykzD2MTsvHS3z3elm0QHaE9%26pid%3DApi&f=1"  alt="">
    <a href="#">skills</a>
  </div>
  <div class="navlink">
    <img src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Ftse1.mm.bing.net%2Fth%3Fid%3DOIP.1KqykzD2MTsvHS3z3elm0QHaE9%26pid%3DApi&f=1"  alt="">
    <a href="#">portfolio</a>
  </div>
  <div class="navlink">
    <img src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Ftse1.mm.bing.net%2Fth%3Fid%3DOIP.1KqykzD2MTsvHS3z3elm0QHaE9%26pid%3DApi&f=1"  alt="">
    <a href="#">contact</a>
  </div>
</div>

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  background: #181818;
  font-size: 18px;
  font-family: 'Poppins';
}

li, a {
  text-decoration: none;
  color: white;
}

ul {
  list-style: none;
}

.navbar {
  display: flex;
  flex-direction: row;
  width: full;
  justify-content: center;
  align-items: center;
}

.navlink {
  display: flex;
  flex-direction: column;
  margin-right: 2rem;
}

.navlink img {
  width: 3em;
  align-self: center;
}

.navlink a{
  align-self: center;
}

请告诉我这是否有效。

需要帮忙！试图将导航链接放在图像下方

Need help! Trying to place nav links below image

css

navigation

flexbox