CSS Center Navbar Elements

Question

I know that this is probably asked many times already. I just want to center all items of my navbar vertically. I tried to set vertical-align: center; in my headercss tag. I probably miss something:

<header>
            <nav class="navbar">

                <div class="branding"> 
                    <a href="index.html"> <img src="pic/branding.png" alt="branding"></a>
                </div>

                <div class="navbar-links">
                    <ul>
                        <li><a href="de/login.html">Login</a> </li>
                    </ul>          
                </div>

                <div class="searchbox-container">
                    <input class="searchbar" type="text" placeholder="Search...">
                    <button class="search-button" type="submit"><img src="pic/searchicon.png" height="25px" width="25px" alt="search"></button>
                </div>

            </nav>

        </header>

css:

*{
    margin: 0;
    padding: 0;
    text-decoration: none;
    list-style: none;
}

body{
    font-family: sans-serif;
}

/* Navbar stuff */
header{
    background-color: #424242/*#80aaff*/;
    height: 60px;
}

.navbar{
    width: 80%;
    margin: auto;
}

.branding{
    float: left;
}

.navbar-links{
    float: right;
}

.navbar-links ul{
    list-style: none;
}

.navbar-links ul li a{
    text-decoration: none;
    text-transform: uppercase;
    color: white;
}

Caleb · Accepted Answer · 2020-05-31T21:23:24.720

1

* {
  margin: 0;
  padding: 0;
  text-decoration: none;
  list-style: none;
}

body {
  font-family: sans-serif;
}


/* Navbar stuff */

header {
  background-color: #424242/*#80aaff*/
  ;
  height: 60px;
  display: flex;
  align-items: center;
}

.navbar {
  width: 80%;
  margin: auto;
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
}

.branding {
  margin-right:
}

.navbar-links {
  margin-left: auto;
}

.navbar-links ul {
  list-style: none;
}

.navbar-links ul li a {
  text-decoration: none;
  text-transform: uppercase;
  color: white;
}

<header>
  <nav class="navbar">
    <div class="branding">
      <a href="index.html"> <img src="pic/branding.png" alt="branding"></a>
    </div>
    <div class="navbar-links">
      <ul>
        <li><a href="de/login.html">Login</a> </li>
      </ul>
      <div>
        <div class="searchbox-container">
          <input class="searchbar" type="text" placeholder="Search...">
          <button class="search-button" type="submit"><img src="pic/searchicon.png" height="25px" width="25px" alt="search"></button>
        </div>
      </div>
    </div>
  </nav>
</header>

edited May 31 '20 at 21:23

answered May 31 '20 at 20:39

Caleb

105
2
10

what is `flex-flow:` exactly? – CodeIsLaw May 31 '20 at 20:41
```flex-flow``` is the shortcut for ```flex-direction``` and ```flex-wrap```. – Caleb May 31 '20 at 20:44
You can find quick information on flex properties here: https://yoksel.github.io/flex-cheatsheet/ – Caleb May 31 '20 at 20:46
I can't change the `float` of my items with that? – CodeIsLaw May 31 '20 at 20:59
I've edited my answer above. Please check it out. – Caleb May 31 '20 at 21:26

CSS Center Navbar Elements

1 Answers1