Centering the IMG element in Navbar

user_9055653 0
Viewed 38

Good days guys I would like to ask if how to center the image element in the navigation bar, I dint use ul element when I try to use absolute dint work as well.. what I want to make it happen is just like on the image that attached here. thanks

logo

here's the code, by the use I used grid system here

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>

When I tried to use the code above the result is just like below image I attached

enter image description here

css html
4 Answers

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>

user_61101690

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.

user_7714690

I would suggest using 

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

Full example:

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>

user_75669140

I solved this using flexbox, replace the text-align:center; in .firstNav and add a display: flex;

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

Here you have a codepen if you want to checkit! Let me know if that helps!

user_106249630
Related