如何使用CSS解决大屏幕下图片与文本水平对齐问题

现有HTML+CSS代码实现Toast Discord Bot介绍页时，大屏幕下标题文本会偏移到页面顶部，仅图片保持居中，需要调整CSS实现图片与文本垂直对齐、并排展示的效果，参考效果如下：

现有核心代码如下：

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" href="https://toast-shop.opplayz.repl.co/images/logo">
  <title>Toast Discord Bot</title>
</head>
<style>
  body {
    background-image: linear-gradient(to right, #cfd9f2, #A5B8E7, #cfd9f2);
  }
  .profile{
    margin: 0 auto;
    position: relative;
      display: inline-block;
  }
  .profilelogo{
    width: 25vw;
    height: 25vw;
    display: inline-block;
    float: left;
  }
  .profileinfo{
    font-family: arial;
  }
</style>
<body>
  <div class="profile" id="profile">
    <img src="https://toast-shop.opplayz.repl.co/images/logo" class="profilelogo" id="profilelogo">
    <div class="profileinfo">
      <h1>Toast Shop</h1>
      <h2>A Discord Bot that brings fun to your server</h2>
    </div>
  </div>
</body>

错位的核心原因有两点：

• 图片设置了float: left脱离正常文档流，父容器.profile没有触发BFC包裹浮动元素，导致文本块的定位参考异常
• 父容器没有设置垂直对齐规则，文本块默认沿顶部对齐，大屏幕下就会出现文本跑到顶部、和图片错位的问题

直接使用Flex布局替换浮动实现并排，代码改动量最小，兼容性好，修改后的完整CSS如下：

body {
  background-image: linear-gradient(to right, #cfd9f2, #A5B8E7, #cfd9f2);
  /* 清除默认边距，让整个模块在页面水平+垂直居中 */
  min-height: 100vh;
  margin: 0;
  display: grid;
  place-items: center;
}
.profile{
  /* 启用Flex横向布局 */
  display: flex;
  /* 子元素垂直方向居中对齐，解决文本错位问题 */
  align-items: center;
  /* 设置图片和文本的间距 */
  gap: 2rem;
  max-width: 90vw;
}
.profilelogo{
  width: 25vw;
  height: 25vw;
  /* 移除原有float、inline-block属性，Flex子项不需要浮动 */
  flex-shrink: 0;
  /* 可选：匹配示例图的圆形头像效果 */
  border-radius: 50%;
}
.profileinfo{
  font-family: arial;
}
/* 可选：清除标题默认边距，优化视觉效果 */
.profileinfo h1, .profileinfo h2 {
  margin: 0.4rem 0;
}

如果需要在小屏幕手机上自动切换为上下布局，可以追加以下媒体查询代码：

@media (max-width: 768px) {
  .profile {
    flex-direction: column;
    text-align: center;
  }
  .profilelogo {
    width: 50vw;
    height: 50vw;
  }
}

内容的提问来源于stack exchange，提问作者opc