为什么我无法向上移动此图像？ CSS问题

问题描述 投票：0回答：2

我正在尝试找出如何使用纯 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 代码的顶部，因此不要花时间寻找它！我感谢任何帮助！

html css margin
2个回答
0
投票

我意识到stubimg类不是设置为绝对的，而是设置为相对的。我的错！

0
投票

您正在使用 

align-content:center;
属性，这就是图像固定在页面中心且顶部也不起作用的原因。仅此足以固定图像水平居中。

.stubimg {     
position: relative;
text-align: center;
}

现在您可以根据需要固定图像的位置。 

@import url('https://fonts.googleapis.com/css2?family=Bungee+Inline&display=swap');
html, body
{
    height: 100%;
}

.stubimg {     
position: relative;
text-align: 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="180px" height="180px">
 </div>
<nav>
  <a href="#">HOME</a>
  <a href="#">ABOUT</a>
  <a href="#">MUSIC</a>
  <div id="indicator"></div>
</nav>
   
 
</body>

</html>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.