时间戳

首页 > 解决方案 > 在导航中移动文本和图像

javascript - 在导航中移动文本和图像

问题描述

我想知道如何使图片居中并保持 div 的高度。

我想将“图片”向下移动，但它不起作用......它也将我的网页名称也向下移动了一点。

这是我当前的代码：

*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
body{
    font-family: 'Poppins', sans-serif;
}
.wrapper {
    height: 100vh;
    overflow-x: hidden;
    overflow-y: auto;
    perspective: 1px;
}
/* GO UNDER efc*/
.section{
    height: 100vh;
    max-width: 100vw;
    display: flex;
}
.goUnder::after {
    content: "";
    
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    
    transform: translateZ(-1px) scale(2);
    background-size: cover;
    z-index: -1;
  }
.image1::after{
    background-image: url("../images/bg.jpg");
    background-color: #1b1b1b;
    position: center;
}
.static {
    background: #D5C49A;
}/* NAVBAR */
.navbar{
    position: fixed;
    width: 100%;
    z-index: 2;
    padding: 2rem 0;
    transition: all 0.3s ease;
}
.content{
    padding: 0 20rem;
}
.navbar.sticky{
    background: #1b1b1b;
    padding: 10px 0;
    box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.1);
}
.navbar .content{
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
.navbar .logo a{
    color: #fff;
    font-size: 2rem;
    font-weight: 600;
    text-decoration: none;
}
.logo-img{
    width: 5rem;
    height:auto;
    line-height: -1;
  }
  #logAndText{
    display:block;
    margin:auto;
  }
  .navbar .menu-list{
    display: inline-flex;
  }
  .menu-list li{
    list-style: none;
  }
  .menu-list li a{
    color: #fff;
    font-size: 1.2rem;
    font-weight: 500;
    margin-left: 2rem;
    text-decoration: none;
    transition: all 0.3s ease;
  }
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <link rel="preconnect" href="https://fonts.gstatic.com"> 
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@500&display=swap" rel="stylesheet">
    <script src="https://kit.fontawesome.com/f05f025bf3.js" crossorigin="anonymous"></script>
    <title>GameXcom</title>
</head>
<body>
    <div class="wrapper">
        <div class="section goUnder image1 center">
            <!--nav-->
            <nav class="navbar">
                <div class="content">
                    <div id="logoAndText">
                        <div class="logo">
                            <img src="../images/logo.png" class="logo-img">
                            <a href="#">GameXcom</a>
                        </div>
                    </div>
                        <ul class="menu-list"> 
                        <li><a href="#">Home</a></li>
                        <li><a href="#">About</a></li>
                        <li><a href="#">Services</a></li>
                        <li><a href="#">Features</a></li>
                        <li><a href="#">Contact</a></li>
                    </ul>
                </div>
            </nav>
        </div>
        <div class="section static">
            <h1>Static</h1>
        </div>
    </div>
</body>
</html>

标签： javascripthtmlcss

解决方案

您可以添加该代码以在 div 元素的中心对齐图像和徽标文本！

.logo {
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: 80%;
}

此外，您可以更改有关徽标图像和徽标文本距离的最大宽度。

*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
body{
    font-family: 'Poppins', sans-serif;
}
.wrapper {
    height: 100vh;
    overflow-x: hidden;
    overflow-y: auto;
    perspective: 1px;
}
/* GO UNDER efc*/
.section{
    height: 100vh;
    max-width: 100vw;
    display: flex;
}
.goUnder::after {
    content: "";
    
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    
    transform: translateZ(-1px) scale(2);
    background-size: cover;
    z-index: -1;
  }
.image1::after{
    background-image: url("../images/bg.jpg");
    background-color: #1b1b1b;
    position: center;
}
.static {
    background: #D5C49A;
}/* NAVBAR */
.navbar{
    position: fixed;
    width: 100%;
    z-index: 2;
    padding: 2rem 0;
    transition: all 0.3s ease;
}
.content{
    padding: 0 20rem;
}
.navbar.sticky{
    background: #1b1b1b;
    padding: 10px 0;
    box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.1);
}
.navbar .content{
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
.navbar .logo a{
    color: #fff;
    font-size: 2rem;
    font-weight: 600;
    text-decoration: none;
}
.logo {
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: 80%;
}
.logo-img{
    width: 5rem;
    height:auto;
    line-height: -1;
  }
  #logAndText{
    display:block;
    margin:auto;
  }
  .navbar .menu-list{
    display: inline-flex;
  }
  .menu-list li{
    list-style: none;
  }
  .menu-list li a{
    color: #fff;
    font-size: 1.2rem;
    font-weight: 500;
    margin-left: 2rem;
    text-decoration: none;
    transition: all 0.3s ease;
  }
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <link rel="preconnect" href="https://fonts.gstatic.com"> 
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@500&display=swap" rel="stylesheet">
    <script src="https://kit.fontawesome.com/f05f025bf3.js" crossorigin="anonymous"></script>
    <title>GameXcom</title>
</head>
<body>
    <div class="wrapper">
        <div class="section goUnder image1 center">
            <!--nav-->
            <nav class="navbar">
                <div class="content">
                    <div id="logoAndText">
                        <div class="logo">
                            <img src="../images/logo.png" class="logo-img">
                            <a href="#">GameXcom</a>
                        </div>
                    </div>
                        <ul class="menu-list"> 
                        <li><a href="#">Home</a></li>
                        <li><a href="#">About</a></li>
                        <li><a href="#">Services</a></li>
                        <li><a href="#">Features</a></li>
                        <li><a href="#">Contact</a></li>
                    </ul>
                </div>
            </nav>
        </div>
        <div class="section static">
            <h1>Static</h1>
        </div>
    </div>
</body>
</html>

推荐阅读