时间戳

首页 > 解决方案 > 在导航栏中将 IMG 元素居中

html - 在导航栏中将 IMG 元素居中

问题描述

好日子伙计们，我想问一下如何在导航栏中将图像元素居中，当我尝试使用绝对dint 工作时，我使用ul元素。我想让它发生就像在图像上一样附在这里。谢谢

标识

这是代码，通过使用我在这里使用网格系统

body,
html {
    padding: 0;
    margin: 0;  
    height: 100%;
}


/* ########## Custome Design ######### */

.mainbox {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: repeat(12, 1fr);
    /* margin: 10px 0; */
    height: 100vh;
   
}

.box{
    background-image: linear-gradient(to bottom, 
                    rgba(93, 173, 226, 0.800), 
                    rgba(93, 173, 226, 0.932) ),
                    url(/img/bg-picture.jpg);
    background-size: cover;
    background-position: left;
    height: 100vh;
}

header {
    grid-row: 1  / 2;
    grid-column: 1 / -1;
    /* background-color: #fff; */
}

.logo {
    height: 65px;
    width: 65px;
    position: absolute;
    margin: auto;
}

.firstNav {
    text-align: center;
}

.firstNav > a {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 14px;
    text-transform: uppercase;
    text-decoration: none;
    padding: 0 12px;
    color: #fff;
}

.firstNav > a:hover {
    background: #000;
}
<body>
    <div class="mainbox box">
        <header>
            <nav>
                <div class="firstNav">
                <a href="#">Home</a>
                <a href="#">Blog</a>
                <a href="#">Portfolio</a>
                <img src="./img/logo.png" alt="logo" class="logo">
                <a href="#">Progress</a>
                <a href="#">About</a>
                <a href="#">Contact</a>
                </div>
            </nav>
        </header>
    </div>
   
</body>

当我尝试使用上面的代码时，结果就像我附上的下图一样

在此处输入图像描述

标签： htmlcss

解决方案

我建议使用

.firstNav {
  display: flex
  justify-content: center
  align-items: center
}

完整示例：

body,
html {
    padding: 0;
    margin: 0;  
    height: 100%;
}


/* ########## Custome Design ######### */

.mainbox {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: repeat(12, 1fr);
    /* margin: 10px 0; */
    height: 100vh;
   
}

.box{
    background-image: linear-gradient(to bottom, 
                    rgba(93, 173, 226, 0.800), 
                    rgba(93, 173, 226, 0.932) ),
                    url(/img/bg-picture.jpg);
    background-size: cover;
    background-position: left;
    height: 100vh;
}

header {
    grid-row: 1  / 2;
    grid-column: 1 / -1;
    /* background-color: #fff; */
}

.logo {
    height: 65px;
    width: 65px;
}

.firstNav {
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
}

.firstNav > a {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 14px;
    text-transform: uppercase;
    text-decoration: none;
    padding: 0 12px;
    color: #fff;
}

.firstNav > a:hover {
    background: #000;
}
 <div class="mainbox box">
   <header>
     <nav>
       <div class="firstNav">
         <a href="#">Home</a>
         <a href="#">Blog</a>
         <a href="#">Portfolio</a>
         <img src="https://placehold.it/50x50" alt="logo" class="logo">
         <a href="#">Progress</a>
         <a href="#">About</a>
         <a href="#">Contact</a>
       </div>
     </nav>
   </header>
</div>

推荐阅读