如何使用position: relative实现文本与图片水平居中对齐？

嗨，这个场景用Flexbox就完美解决了，完全不用依赖position:absolute，还能自适应文本长度的变化！我给你捋捋具体怎么做：

核心思路 #

用Flexbox布局来控制文本和图标的排列，它天生支持动态内容，不管左右文本多长，都能自动调整，不需要固定任何尺寸。

完整代码示例 #

<!DOCTYPE html>
<html>
<head>
<style>
body { 
  padding: 0; 
  margin: 0; 
  min-height: 100vh; /* 让body占满视口高度，方便查看整体居中效果 */
  display: flex; 
  align-items: center; /* 可选：让整个组件在页面垂直居中 */
}

.container {
  display: flex;
  align-items: center; /* 让文本和图标垂直居中对齐 */
  justify-content: center; /* 让整个组件组水平居中 */
  gap: 12px; /* 给元素之间添加间距，视觉更舒适 */
}

.right-text {
  font-family: arial; 
  font-size: 13px;
}

.icon {
  width: 32px; 
  height: 32px; 
  background: url("https://i.imgur.com/VXlnn8a.png");
  background-size: cover; /* 确保图片填满容器 */
}

.left-text {
  font-family: arial; 
  font-size: 13px; 
  font-weight: 700;
}
</style>
</head>
<body>
<div class="container">
  <div class="right-text">Right</div>
  <div class="icon"></div>
  <div class="left-text">Left</div>
</div>
</body>
</html>

关键细节说明 #

• 给三个元素套一个父容器.container，通过这个容器统一控制布局
• display:flex让内部元素自动水平排列，align-items:center确保文本和图标在垂直方向上完美对齐，不管文本长度或图标高度怎么变都能适配
• gap属性用来控制元素之间的间距，比传统的margin更省心，不会出现外边距折叠的问题
• 去掉了原代码中不必要的position:relative和display:inline-block，Flex容器的子元素默认就是flex item，无需额外设置

兼容老浏览器的备选方案（可选） #

如果需要兼容IE10及以下，可以用inline-block方案：

.container {
  text-align: center;
  font-size: 0; /* 消除inline-block元素之间的空白间隙 */
}

.container > div {
  display: inline-block;
  vertical-align: middle;
  font-size: 13px; /* 恢复字体大小 */
  margin: 0 6px; /* 添加元素间距 */
}

不过还是优先推荐Flexbox，代码更简洁，逻辑更清晰，现在主流浏览器都支持得很好。

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