水平导航栏自定义H1文本：图标左置并与标题水平对齐需求

要实现图标在左侧、与标题水平对齐的效果，你可以通过Flexbox布局调整结构，修正原有代码的布局问题：

修改后的HTML代码 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Poise Idiomas</title>
    <link rel="stylesheet" href="css/style.css">
    <script src="https://kit.fontawesome.com/e424189c9b.js" crossorigin="anonymous"></script>
</head>

<body>
    <div class="topnav">
      <i class="fa-solid fa-bars nav-icon"></i>
      <h1 id="title">
        <span class="green">P</span><span class="yellow">O</span><span class="blue">I</span><span class="yellow">S</span><span class="green">E</span>
        <span class="fancy-canada-flag">Idiomas</span><span class="fancy" style="font-size:30pt;">.com</span>
      </h1>
    </div>
    <script src="script/script.js"></script>
</body>

</html>

修改后的CSS代码 #

@import url("https://fonts.googleapis.com/css2?family=Lobster&family=Tilt+Warp&display=swap");
:root {
  --bg-color: rgba(20, 20, 20, 1);
}
html, body {
  background-color: var(--bg-color);
  color: white;
  font-family: "Tilt Warp", cursive;
  margin:0px;
  padding:2px;
}
h1 {
  margin: 0px;
  padding: 0px;
}
::selection{
  background: transparent;
  color: #d12628;
}
/* 核心布局修改 */
.topnav{
  display: flex;
  align-items: center; /* 垂直居中图标与标题 */
  padding: 0 1rem; /* 避免内容贴边 */
  gap: 1rem; /* 图标与标题间的间距 */
}
#title {
  text-align:center;
  font-size: 6rem;
  color: #ef233c;
  flex: 1; /* 让标题占据剩余空间，保持居中 */
}
/* 匹配标题的图标样式 */
.nav-icon {
  font-size: 4rem;
  color: white;
}
/* 原有样式保留 */
.blue {color: #002776;}
.yellow {color: #ffdf00;}
.green {color: #009c3b;}
.white {color: #ffffff;}
.fancy{font-family: "Lobster";color:#d12628;}
.fancy-canada-flag {
  font-family: "Lobster";
  background-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/d/d9/Flag_of_Canada_(Pantone).svg/800px-Flag_of_Canada_(Pantone).svg.png');
  background-size: cover;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}

/*No Javascript code written.*/

关键调整说明 #

• 将图标从<h1>中移出，作为.topnav的直接子元素，避免破坏标题的居中逻辑。
• 用display: flex和align-items: center实现图标与标题的垂直对齐。
• 给#title设置flex: 1，让它占据父容器剩余空间，保持原有居中显示效果。
• 给图标添加独立类名，方便调整尺寸匹配标题视觉比例。

内容的提问来源于stack exchange，提问作者Mr. Lima