如何使徽标居中，同时让元素靠近它？

Question

       .header{
    min-height: 90vh;
    width: 100%;
    background-image: linear- 
    
    gradient(rgba(4,9,30,0.7),rgba(4,9,30,0.7)),
    url(../images/background.jpg);
    background-position: center;
    background-size: cover;
    position: relative;
    overflow: hidden;
    background-repeat: no-repeat;
    background-attachment: fixed;
      
    }

    nav{
    min-height: 7%;
    background-color: white;
    opacity: 0.8;
    display: flex;
    padding: 2% 4%;
    justify-content: space-between;
    align-items: center;
    }
    nav img{
    width: 140px;
    }
    .nav-links{
    flex: 1;
    text-align: right;
    }
    .nav-links ul li{
    list-style: none;
    display: inline-block;
    padding: 8px 12px;
    position: relative;
    }
    .nav-links ul li a{
    color: rgb(0, 0, 0);
    text-decoration: none;
    font-size: 13px;
    }
    .nav-links ul li::after{
    content: '';
    width: 0%;
    height: 2px;
    background: #f44336;
    display: block;
    margin: auto;
    transition: 1s;    
    }
    .nav-links ul li:hover::after{
    width: 100%;
    }
    nav .fa{
    display: none;
    }

    <section class="header">
        
        <nav>
            <a href="index.html"><img src="../images/logo.png"></a>
            <div class="nav-links" id="navLinks">  
                <i class="fa fa-close" onclick="hideMenu()"></i>
                <ul>
                    <li><a href="index.html">HOME</a></li>
                    <li><a href="about.html">ABOUT US</a></li>
                    <li><a href="locations.html">LOCATIONS</a></li>
                    <li><a href="products.html">PRODUCTS</a></li>
                    <li><a href="contact.html">CONTACTS</a></li>
                </ul>
            </div>
            <i class="fa fa-bars" onclick="showMenu()"></i>
        </nav>
        
        <div class="text-box">
            <h1>AVEM SALAM</h1>
            <p>AICI CEVA DESCRIERE<br>YOU KNOW SHORT AND GOOD</p>
            <a href="products.html" class="hero-btn">PRODUSELE NOASTRE</a>
        </div>
    </section>

此外，我需要一些与导航栏大小相关的帮助，如何使它的高度变小？我尽力使用“最小高度：7%；”但这还不够…… 看起来你的 post 主要是代码；请添加更多 details.It 看起来你的 post 主要是代码；请添加更多 details.It 看起来你的 post 主要是代码；请添加更多 details.It 看起来你的 post 主要是代码；请添加更多详细信息。 [![它需要看起来像这样][2]][2]

[![这就是导航栏当前的样子][1]][1] [1]: https://i.stack.imgur.com/UVWJg.jpg [2]: https://i.stack.imgur.com/BNswb.png

Answer 1

你的DOM顺序有误，试试这个HTML

   <section class="header">
        
        <nav>
            <div class="nav-links" id="navLinks">  
                <i class="fa fa-close" onclick="hideMenu()"></i>
                <ul>
                    <li><a href="index.html">HOME</a></li>
                    <li><a href="about.html">ABOUT US</a></li>

                </ul>
            </div>
            <a href="index.html"><img src="../images/logo.png"></a>
            <div class="nav-links" id="navLinks">  
                <i class="fa fa-close" onclick="hideMenu()"></i>
                <ul>
                    <li><a href="locations.html">LOCATIONS</a></li>
                    <li><a href="products.html">PRODUCTS</a></li>
                    <li><a href="contact.html">CONTACTS</a></li>
                </ul>
            </div>
            <i class="fa fa-bars" onclick="showMenu()"></i>
        </nav>
        
        <div class="text-box">
            <h1>AVEM SALAM</h1>
            <p>AICI CEVA DESCRIERE<br>YOU KNOW SHORT AND GOOD</p>
            <a href="products.html" class="hero-btn">PRODUSELE NOASTRE</a>
        </div>
    </section>

Answer 2

如果您希望徽标周围的元素和徽标居中，那么您的代码完全写错了。

使 parent-div 显示 property:flex

然后用classnav-leftlogo[=35=做三个childdiv ] 和 nav-right 并给它们宽度百分比 33.33 %

在第一个 div 和 class nav-left
中包含 ul li
然后在第二个 div 元素中添加您的徽标，以便您可以控制图像响应速度

最后在第三个 div 中包含 ul li 和 class nav-right

关于身高

从导航中删除高度，我假设您是编码新手，那么您也应该这样做

ul,li { padding: 0; margin : 0;

}

应该在开始设置样式之前完成，因为某些 html 标签具有默认的填充和边距（在 Google 上进行搜索，以便您知道哪些标签具有此默认样式，例如 p 标签 heading-tags anchor-tags 等,..) 你必须删除它然后添加你的样式。希望这对您有所帮助:)

如何使徽标居中，同时让元素靠近它？

How to center the logo, while having the elements near it?

html

css

navbar