html - 如何将文本放在导航栏背景图像的顶部？

问题描述

我试图将文本放在我的导航栏上，但是无论我将文本（例如“主页”）放在哪里，它都会出现在我实际导航栏的下方或顶部。

这是我的html代码

  <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, inital-scale=1.0">
    <meta http-equiv="X-AU-Compatible" content="ie=edge">
    <title>Main page</title>
    <link rel="stylesheet" href="style.css">
    <script src="https://kit.fontawesome.com/f96187f2fa.js" crossorigin="anonymous"></script>
</head>
<body>
    <div class="container">
        <nav class="main-nav">
            <ul>
                <li>
                    <img src="nav_image.png" alt="">
                </li>
                <li>
                    <img src="nav_image.png" alt="" >
                </li>
                <li>
                    <img src="nav_image.png" alt="" >
                </li>
                <li>
                    <img src="nav_image.png" alt="" >
                </li>
            </ul>
        </nav>
    </div>

</body>
</html>

这是我的CSS代码

html {
  box-sizing: border-box;
  font-family: Arial, Helvetica, sans-serif;
}

body {
  background: #D0FEFE;
  margin: 30px 50px;
  line-height: 1.4;
}

.main-nav ul {
  display: grid;
  grid-gap: 20px;
  padding: 0;
  list-style: none;
  grid-template-columns: repeat(4, 1fr);
}

.main-nav a {
  text-decoration: none;
  padding: 0.8rem;
  text-align: center;
  text-transform: uppercase;
  font-size: 1.1rem;

}



.main-nav img {
width: 250px;
}

标签： htmlcss

html - 如何将文本放在导航栏背景图像的顶部？

问题描述

解决方案

推荐阅读