Vertical align items in navbar-CodePudding

I have a navbar, and would like all items in it to be vertically aligned. I first tried using flexbox, which lead to having too much space in between the elements, which I fixed by using float: right instead of flexbox.

My goal is to have a navbar that looks something like this: (made in Photoshop)

But with a different layout.

Here's what I have so far:

html, body {
  margin: 0;
}

.topnav {
    overflow: hidden;
    background-color: #252525;
    color: rgb(236, 236, 236);
}

.topnav a {
    float: left;
    display: block;
    color: rgb(236, 236, 236);
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
}

.topnav a.active {
  background-color: rgb(243, 33, 33);
  color: white;
}

.search {
    float: right;
    margin-right: 10px;
    height: 6vh;
    padding-left: 12px;
    border-radius: 0;
    width: 20vw;
}

input[type="text"] {
    -moz-appearance: none;
    -webkit-appearance: none;
    border: 0px none transparent;
    border-radius: 10px;
    line-height: 20px;
    background: #181818;
    color: rgb(255, 255, 255);
}

input[type="text"].dark {
    background: rgb(27, 27, 27);
    color: #fff;
}

input[type="text"].light {
    background: #fff;
    color: #222;
}

input[type="text"]::-webkit-search-cancel-button {
    -webkit-appearance: none;
    height: 1.4em;
    width: 1.4em;
    border-radius: 50em;
    background: url(https://pro.fontawesome.com/releases/v5.10.0/svgs/solid/times-circle.svg) no-repeat 70% 70%;
    background-size: contain;
    opacity: 0;
    pointer-events: none;
    cursor: pointer;
    margin-right: min(5%, 20px);
}

input[type="text"]:focus::-webkit-search-cancel-button {
    opacity: .3;
    pointer-events: all;
}

input[type="text"].dark::-webkit-search-cancel-button {
    filter: invert(1);
}

::placeholder {
    color: rgb(194, 194, 194);
    opacity: 1;
}

:-ms-input-placeholder {
    color: rgb(194, 194, 194);
}

::-ms-input-placeholder {
    color: rgb(194, 194, 194);
}

.create {
    color: white;
    float: right !important;
    cursor: pointer;
    border:0;
    background-color: #343434;
    border: 1px solid #f6f6f6;
    padding: 5px;
    border-radius: 10px;
    font-size: 250%;
    margin-right: .5vw;
    height: 3vh;
    color: #1f282c;
}

.usericon {
    font-size: 5vh;
    font-weight: 100;
    margin-right: 3vw;
    cursor: pointer;
}

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width">
        <title>Homepage</title>
        <link href="style.css" rel="stylesheet" type="text/css" />
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.0/css/all.min.css"/>
    </head>
    <body>
        <div class="topnav">
            <a class="active" href="#">Home</a>
            <a href="#profile" style="float:right"><i class='fas fa-user-circle usericon' id="profile"></i></a>
            <input type="text" placeholder="Search.." class="search dark">
            <a href="#create" style="float:right"><i class='fas fa-plus create' id="create"></i></a>
        </div>
    </body>
</html>

This is the result:

The only difference is that I use a custom SVG instead of the font awesome icon, which is why it looks weird.

Is it possible to vertically align all items in the navbar? Currently, it looks like the profile image and the plus icon are vertically aligned, but the search bar and home text is not.

Is this possible? Thanks.

CodePudding user response：

General .topnav layout as asked for by:

positioning HTML nav items in logical order
replacing float with flexbox
having all 3 right side nav items share the same flex item div
making flex container items align vertically and spread out horizontally with the help of flex container properties align-itemsand justify-content:

html, body {
  margin: 0;
}

.topnav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    overflow: hidden;
    background-color: #252525;
    color: rgb(236, 236, 236);
}

.topnav a {
    color: rgb(236, 236, 236);
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
}

.topnav a.active {
  background-color: rgb(243, 33, 33);
  color: white;
}

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width">
        <title>Homepage</title>
        <link href="style.css" rel="stylesheet" type="text/css" />
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.0/css/all.min.css"/>
    </head>
    <body>
      <div class="topnav">
        <a class="active" href="#">Home</a>
        <div>
          <a href="#create"><i class='fas fa-plus create' id="create"></i></a>
          <input type="text" placeholder="Search.." class="search dark">                
          <a href="#profile"><i class='fas fa-user-circle usericon' id="profile"></i></a>
        </div>
      </div>
    </body>
</html>

CodePudding user response：

If you simplify the layout, you can achieve this with just one flexbox container (.topnav__right) inside another (.topnav).

html,
body {
  margin: 0;
}

.topnav {
  border: 1px solid #252525;
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
}

.topnav a {
  display: block;
  color: rgb(236, 236, 236);
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
  color: white;
}

.home {
  background-color: red;
}

.create {
  background-color: blue;
}

.profile {
  background-color: green;
}


.topnav__right {
  display: flex;
  align-items: center;
  padding-right: 20px;
}

.search {
  height: 6vh;
  width: 20vw;
  margin: 0 12px;
}

<div class="topnav">
  <a class="home" href="#">Home</a>
  <div class="topnav__right">
    <a href="#create" class="create">Create</a>
    <input type="text" placeholder="Search.." class="search dark">
    <a href="#profile" class="profile">Profile</a>
  </div>
</div>