以高度居中影像并將其對齊在導航欄的右側-有解無憂

我希望具有“userIcon”類的影像以高度居中，并將其對齊在導航欄的右側。我嘗試了很多不同的東西，但我沒有找到結果。使用 float: right 是正確的影像，但不再以高度為中心。

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>

uj5u.com熱心網友回復：

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>

這個怎么樣，添加display:flex; align-items:center進去.navbar，我margin-left: auto用.userIconpicsum 來替換空資產。

uj5u.com熱心網友回復：

這應該很適合你。使用flexwithalign-items: center;使它們垂直居中。然后使用margin-left: auto;onuserIcon將其移至最右側。

一個非邊距解決方案是將 LinkSaverIconimg和嵌套h1在一個 div 中，并將該 div 設定為display: flexwithalign-items: center;或inline-block。然后將嵌套userIcon在自己的 div 中，并使用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>

uj5u.com熱心網友回復：

.usericon{margin-right:auto;}

這可能會奏效，（編輯）對不起第一次搞砸了。

轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/441407.html

標籤：html css

上一篇：如何減少表格行中的垂直空間？

下一篇：防止白色區域并使用100%高度