我试图弄清楚如何使用纯 css 使存根图像更靠近导航栏。我尝试使用 translateY() 值将图像推高，使用了具有绝对值的“底部”和“顶部”值（所以它应该可以工作）。我不相信图像或导航栏上有任何边距，所以如果您知道如何解决这个问题，我们将不胜感激！
这是我的css和html！
@import url('https://fonts.googleapis.com/css2?family=Bungee+Inline&display=swap');
html, body
{
height: 100%;
}
.stubimg {
position: relative;
top: 36%;
text-align: center;
align-items: center;
align-self: center;
align-content: center;
}
body
{
margin: 0;
background-color: #051721;
}
nav
{
position: absolute;
top: 13%;
right: 0;
left: 0;
width: 319px;
display: table;
margin: 0 auto;
transform: translateY(-50%);
font-family: 'Bungee Inline', cursive;
}
nav a
{
position: relative;
width: 33.333%;
display: table-cell;
text-align: center;
color: #1A4645;
text-decoration: none;
font-family: 'Bungee Inline', Geneva, Tahoma, sans-serif;
font-weight: bold;
padding: 10px 20px;
transition: 0.2s ease color;
}
nav a:before, nav a:after
{
content: "";
position: absolute;
border-radius: 50%;
transform: scale(0);
transition: 0.2s ease transform;
}
nav a:before
{
top: 0;
left: 10px;
width: 6px;
height: 6px;
}
nav a:after
{
top: 5px;
left: 18px;
width: 4px;
height: 4px
}
nav a:nth-child(1):before
{
background-color: #F8BD25;
}
nav a:nth-child(1):after
{
background-color: #cc7000;
}
nav a:nth-child(2):before
{
background-color: #F8BD25;
}
nav a:nth-child(2):after
{
background-color: #cc7000;
}
nav a:nth-child(3):before
{
background-color: #F8BD25;
}
nav a:nth-child(3):after
{
background-color: #cc7000;
}
#indicator
{
position: absolute;
left: 12%;
bottom: 0;
width: 30px;
height: 3px;
background-color: transparent;
border-radius: 5px;
transition: 0.2s ease left;
}
nav a:hover
{
color: #286868;
}
nav a:hover:before, nav a:hover:after
{
transform: scale(1);
}
nav a:nth-child(1):hover ~ #indicator
{
background: linear-gradient(130deg, #F8BD25, #cc7000);
}
nav a:nth-child(2):hover ~ #indicator
{
left: 45%;
background: linear-gradient(130deg, #F8BD25, #cc7000);
}
nav a:nth-child(3):hover ~ #indicator
{
left: 78.5%;
background: linear-gradient(130deg, #F8BD25, #cc7000);
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="We are Stub.">
<meta name="author" content="Stub">
<meta property="og:title" content="Stub">
<meta property="og:type" content="website">
<meta property="og:url" content="https://stub.w3spaces.com/">
<meta property="og:description" content="We are Stub">
<meta property="og:image" content="https://stub.w3spaces.com/Stub_Tree.png">
<link rel="icon" href="https://stub.w3spaces.com/Stub_Tree.png">
<link rel="apple-touch-icon" href="https://stub.w3spaces.com/Stub_Tree.png">
<!-- css-->
<link rel="stylesheet" href="https://stub.w3spaces.com/main.css?bypass-cache=1625014765">
<!-- fonts -->
<link href="https://fonts.googleapis.com/css2?family=Unica+One&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Varela+Round&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Kumar+One+Outline&display=swap" rel="stylesheet">
<title>Stub</title>
<body>
<div class="stubimg">
<img src="https://stub.w3spaces.com/Stub_Tree.png" width="230px" height="230px">
</div>
<nav>
<a href="#">HOME</a>
<a href="#">ABOUT</a>
<a href="#">MUSIC</a>
<div id="indicator"></div>
</nav>
</body>
</html>请记住，图像的 css 仅位于 css 代码的顶部，所以不要花时间寻找它！我很感激任何帮助！