put an element of nav bar to left most side while other elements are centered

Question

I want to have only the first element of the navbar on the left of and the others centered. What am I missing?

.nav {
  padding: 0;
  text-align: center;
}

.nav li {
  display: inline;
  padding-right: 20px;
  color: #dfd1d1;
}


/* trying to use the below to put the logo on the left but not working */

.nav li:first-child {
  text-align: left;
}

.nav :first-child {
  text-align: left;
}

.nav li:first-of-type {
  text-align: left;
}

.header {
  padding: 25px 10px 25px 10px;
  background-color: rgb(17, 140, 206);
}

.main-content {
  padding: 25px;
  background-color: rgb(152, 158, 160);
  margin: 30px auto 0 auto;
}

h1 {
  text-align: center;
}

<div class="header">
  <ul class="nav">
    <li> Logo</li>
    <li> Home</li>
    <li> Price</li>
    <li> About / Contacts</li>
    <li> Home</li>
  </ul>
</div>

@s.kuznetsov Not really since OP isn't using flexbox properties. — TylerH, Jan 19 '21 at 19:19
Thanks a lot, actually I didn't know flexbox and being a beginner all the best reccomended way to start and to use in the future are welcome :) Thanks — Gianx, Jan 19 '21 at 19:48

score 2 · Accepted Answer · answered Jan 19 '21 at 18:57

This could be one possible solution:
I've put the first element of the nav to the left with a position: absolute and made sure its parent (the nav) has a position:relative.

.nav {
  position: relative;
  padding: 0;
  text-align: center;
}
.nav li {
  display: inline;
  padding-right: 20px;
  color: #dfd1d1;
}

.header {
  position: relative;
  padding: 25px 10px 25px 10px;
  background-color: rgb(17, 140, 206);
}

.main-content {
  padding: 25px;
  background-color: rgb(152, 158, 160);
  margin: 30px auto 0 auto;
}

h1 {
  text-align: center;
}

.logo {
 position: absolute;
 left: 0;
 top: 0;
}

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" type="text/css" href="main.css">
  </head>
  <body>

<div class="header">
  <ul class="nav">
    <li class="logo"> Logo</li>
    <li> Home</li>
    <li> Price</li>
    <li> About / Contacts</li>
    <li> Home</li>
  </ul> 
</div>

Matthew Dangle · Answer 2 · 2021-01-19T19:15:38.193

Separate the logo form the main navigation and make it position: absolute; while centering it vertically with top: 50%; and a transform: translateY(-50%); property. Then add position: relative; to the .header class to contain the absolute positioned element. This will ensure it stays center regardless of the size.

See my example.

.header {
  position: relative;
  padding: 20px;
  background-color: rgb(17, 140, 206);
}

.nav {
  text-align: center;
}
.nav li {
  display: inline;
  padding-right: 20px;
  color: #dfd1d1;
}

.logo {
  position: absolute;
    top: 50%;
  transform: translateY(-50%);
}
.logo span {
  color: #dfd1d1;
}

.main-content {
  padding: 25px;
  background-color: rgb(152, 158, 160);
  margin: 30px auto 0 auto;
}

h1 {
  text-align: center;
}

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" type="text/css" href="main.css">
  </head>
  <body>

<div class="header">
  <div class="logo">
    <span> Logo </span>
  </div>
  <ul class="nav">
    <li> Home </li>
    <li> Price </li>
    <li> About / Contacts </li>
    <li> Home </li>
  </ul> 
</div>

Why does this work?

Setting the top to 50% vertically centers the absolute element on it's relative parent. However this centers the element based on it's top border. To center the middle we will transform the element based on 50% of the absolute elements height. Then ta-da, it's vertically center regardless of any height change.

Thanks a lot Matthew! also appreciated the explanation "Why does this work". I'm a beginner and I like to understand the reasoing behind the code :) — Gianx, Jan 19 '21 at 19:50

put an element of nav bar to left most side while other elements are centered

2 Answers2