Question

好朋友，我想问一下如何将图像元素居中于导航栏中，当我尝试使用绝对来工作时，我会使用 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>

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

Answer 1

You can do something like this:

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; */
}

#header ul li a.logo {
    background: url("http://i48.tinypic.com/2mob6nb.png");
    background-repeat:no-repeat;
    height:140px;
    display:block;
    width:215px;
    margin-top:-61px;
    padding: 0;
}

.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 alt="logo" class="logo">
                <a href="#">Progress</a>
                <a href="#">About</a>
                <a href="#">Contact</a>
                </div>
            </nav>
        </header>
    </div>
   
</body>

Answer 2

I would use a grid like this:

nav {
  display: grid;
  grid-template-columns: repeat(3, 1fr) auto repeat(3, 1fr)
}

nav > * {
  text-align: center;
}

<body>
    <div class="mainbox box">
        <header>
            <nav>
                <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>
            </nav>
        </header>
    </div>
   
</body>

Note: your <div class="FirstNav"> is useless.

Answer 3

我建议使用

.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>

Answer 4

我使用flexbox解决了这个问题，将text-align:center;中的.firstNav替换为display: flex;

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

Here，如果要检查它，您有一个密码笔！让我知道是否有帮助！

在Navbar中将IMG元素居中

4 个答案: