'Center Image in height and align it at the right side of the navbar

I want the image with the class "userIcon" to center in height and also align it at the right side of the navbar. I tried many different things but I didn't find a result. With float: right is the image right, but not centered in height anymore.

body {
  margin: 0;
}

.navbar {
  width: 100%;
  height: 5%;
  background-color: rgb(59, 59, 235);
}

.linkSaverIcon {
  margin-left: .5%;
  height: 60%;
  vertical-align: middle;
}

.userIcon {
  margin-right: 1%;
  height: 60%;
}

.titleFont {
  color: #ffff;
  font-family: 'Ubuntu', sans-serif;
  margin-left: 1%;
  display: inline-block;
  vertical-align: middle;
}

.standardFont {
  color: #ffff;
  font-family: 'Ubuntu', sans-serif;
  margin: 0;
}
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Link Saver</title>
  <link rel="stylesheet" href="../styles/styles.css" />
  <link rel="preconnect" href="https://fonts.googleapis.com" />
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
  <link href="https://fonts.googleapis.com/css2?family=Ubuntu:wght@300&display=swap" rel="stylesheet" />
  <link rel="icon" href="../assets/icons/websiteIcon.svg" />
</head>

<body>
  <nav class="navbar">
    <img class="linkSaverIcon" src="../assets/icons/websiteIcon.svg" alt="Link Saver Icon" href="home.html" />
    <h1 class="titleFont">Link Saver</h1>
    <img src="../assets/icons/userIcon.svg" alt="userIcon" class="userIcon" />
  </nav>
</body>

</html>
htmlcss


Solution 1:[1]

This should work nicely for you. Use flex with align-items: center; to get them center vertically. Then use margin-left: auto; on userIcon to get it to the far right.

A non-margin solution would be to nest the LinkSaverIcon img and the h1 in a div, and set that div to either display: flex with align-items: center; or inline-block. Then nest the userIcon in its own div, and use justify-content: space-between; on navbar.

body {
  margin: 0;
}

.navbar {
  width: 100%;
  background-color: rgb(59, 59, 235);
  display: flex;
  align-items: center;
}

.linkSaverIcon {
  margin-left: .5%;
  height: 60%;
  vertical-align: middle;
}

.userIcon {
  margin-left: auto;
  margin-right: .5em;
  height: 60%;
}

.titleFont {
  color: #ffff;
  font-family: 'Ubuntu', sans-serif;
  margin-left: 1%;
  display: inline-block;
  vertical-align: middle;
}

.standardFont {
  color: #ffff;
  font-family: 'Ubuntu', sans-serif;
  margin: 0;
}
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Link Saver</title>
  <link rel="stylesheet" href="../styles/styles.css" />
  <link rel="preconnect" href="https://fonts.googleapis.com" />
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
  <link href="https://fonts.googleapis.com/css2?family=Ubuntu:wght@300&display=swap" rel="stylesheet" />
  <link rel="icon" href="../assets/icons/websiteIcon.svg" />
</head>

<body>
  <nav class="navbar">
    <img class="linkSaverIcon" src="https://picsum.photos/40/40" alt="Link Saver Icon" href="home.html" />
    <h1 class="titleFont">Link Saver</h1>
    <img src="https://picsum.photos/40/40" alt="userIcon" class="userIcon" />
  </nav>
</body>

</html>

Solution 2:[2]

body {
  margin: 0;
}

.navbar {
  display: flex;
  align-items: center;
  width: 100%;
  height: 5%;
  background-color: rgb(59, 59, 235);
}

.linkSaverIcon {
  margin-left: 0.5%;
  height: 60%;
  vertical-align: middle;
}

.userIcon {
  margin-left: auto;
  margin-right: 1%;
  height: 60%;
}

.titleFont {
  color: #ffff;
  font-family: "Ubuntu", sans-serif;
  margin-left: 1%;
  display: inline-block;
  vertical-align: middle;
}

.standardFont {
  color: #ffff;
  font-family: "Ubuntu", sans-serif;
  margin: 0;
}
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Link Saver</title>
    <link rel="stylesheet" href="../styles/styles.css" />
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Ubuntu:wght@300&display=swap"
      rel="stylesheet"
    />
    <link rel="icon" href="../assets/icons/websiteIcon.svg" />
  </head>
  <body>
    <nav class="navbar">
      <img
        class="linkSaverIcon"
        src="https://picsum.photos/40/40"
        alt="Link Saver Icon"
        href="home.html"
      />
      <h1 class="titleFont">Link Saver</h1>
      <img
        src="https://picsum.photos/40/40"
        alt="userIcon"
        class="userIcon"
      />
    </nav>
  </body>
</html>

How about this, add display:flex; align-items:center in .navbar and margin-left: auto on .userIcon, I use picsum to replace the empty asset.

Solution 3:[3]

.usericon{margin-right:auto;}

this Might do the trick,(Edit) Sorry Messed up first time.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2 David Yappeter
Solution 3

Related Questions