如何在同一div中实现文本与图片的完美对齐？

方法一：使用Flexbox（推荐） #

给.logo容器添加Flex布局，通过align-items: center实现垂直居中，这是现代布局最简洁的方式：

.logo {
  display: flex;
  align-items: center;
  gap: 8px; /* 可选：给图片和文字之间添加间距 */
}

.navbar .logo a {
  color: #ececec;
  font-size: 1.5rem;
  font-weight: 700;
}

.logo img {
  width: 30px;
}

HTML结构保持原代码即可，Flex布局会自动让容器内的元素垂直居中对齐。

方法二：使用vertical-align属性 #

如果需要兼容旧浏览器，可给图片设置vertical-align: middle，让它与文本基线对齐：

.navbar .logo a {
  color: #ececec;
  font-size: 1.5rem;
  font-weight: 700;
}

.logo img {
  width: 30px;
  vertical-align: middle; /* 实现对齐的关键属性 */
  margin-right: 8px; /* 可选：添加图片与文字的间距 */
}

方法三：使用Grid布局 #

也可以通过Grid布局实现居中，代码简洁直观：

.logo {
  display: grid;
  grid-template-columns: auto auto;
  align-items: center;
  gap: 8px; /* 可选：添加元素间距 */
}

.navbar .logo a {
  color: #ececec;
  font-size: 1.5rem;
  font-weight: 700;
}

.logo img {
  width: 30px;
}

以上三种方法均可解决你遇到的对齐问题，优先推荐Flexbox方案，它的布局灵活性更强，适配多种场景。

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