如何在浏览器缩放时保持Logo与标题的横向对齐布局？

要让Logo和标题始终保持横向对齐不堆叠，你可以从以下几点调整：

• 给每个包含Logo和文字的标签添加white-space: nowrap，强制内部元素不换行；
• 给Logo图片设置vertical-align: middle，确保它和文字垂直居中对齐，避免错位；
• 若希望三个社交入口整体始终在一行，给容器添加flex-wrap: nowrap（默认值即为nowrap，明确设置更稳妥），同时可添加overflow-x: auto，让小屏幕下支持横向滚动，避免布局崩溃。

修改后的代码如下：

CSS #

.container {
  display: flex;
  justify-content: center;
  align-items: center; /* 让所有社交入口垂直居中 */
  margin: 0 auto;
  flex-wrap: nowrap;
  overflow-x: auto; /* 小屏幕下允许横向滚动 */
}

.social-item {
  text-decoration: none;
  font-size: 30px;
  font-family: 'Ubuntu', sans-serif;
  margin-right: 20px;
  white-space: nowrap; /* 强制内部Logo与文字不换行 */
}

.social-item img {
  vertical-align: middle; /* Logo与文字垂直对齐 */
  margin-right: 8px; /* 统一Logo和文字的间距 */
}

HTML #

<div class="container">
  <h1 class="social-item"><img src="insta_v2.png" alt="instagram" />handle</h1>
  <h1 class="social-item"><img src="soundcloud.png" alt="soundcloud" />handle</h1>
  <h1 class="social-item"><img src="facebook.png" alt="facebook" />handle</h1>
</div>

之前方法无效的原因 #

• position: absolute会让Logo脱离文档流，无法和文字保持关联布局，反而容易出现错位；
• 不存在inline: block这个CSS属性，正确写法是display: inline-block，但仅给容器设置这个属性，没处理内部元素的换行问题，所以无法解决堆叠问题。

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