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

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 >
    <img  src="../assets/icons/websiteIcon.svg" alt="Link Saver Icon" href="home.html" />
    <h1 >Link Saver</h1>
    <img src="../assets/icons/userIcon.svg" alt="userIcon"  />
  </nav>
</body>

</html>

CodePudding user response：

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 >
      <img
        
        src="https://picsum.photos/40/40"
        alt="Link Saver Icon"
        href="home.html"
      />
      <h1 >Link Saver</h1>
      <img
        src="https://picsum.photos/40/40"
        alt="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.

CodePudding user response：

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 >
    <img  src="https://picsum.photos/40/40" alt="Link Saver Icon" href="home.html" />
    <h1 >Link Saver</h1>
    <img src="https://picsum.photos/40/40" alt="userIcon"  />
  </nav>
</body>

</html>

CodePudding user response：

.usericon{margin-right:auto;}

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