无需绝对定位：实现图片左右文本垂直居中的响应式布局

你想要实现两段文本分别位于图片左右两侧、且与图片垂直居中对齐的效果，同时要适配各类设备的响应式需求，完全可以用Flexbox或CSS Grid来实现——这两种方案不需要依赖固定像素的绝对定位，能自适应不同屏幕尺寸，比你当前的写法更稳定。

方案一：Flexbox（推荐初学者使用，语法简洁易上手） #

重构HTML结构 #

把文本和图片放到同一个容器内，方便统一布局控制：

<div class="button-section">
  <div class="content-container">
    <p class="hello"><strong>Hello!</strong></p>
    <div class="container-gif">
      <img src="/videos/socrates-video.gif" alt="Socrates GIF" id="gif-socrates" />
    </div>
    <p class="socrates-name"><strong>My name is Socrates.</strong></p>
  </div>
</div>

对应CSS代码 #

.button-section .content-container {
  /* 启用Flexbox布局，子元素默认水平排列 */
  display: flex;
  /* 让所有子元素在垂直方向上居中 */
  align-items: center;
  /* 子元素均匀分布，自动把文本推到图片两侧 */
  justify-content: center;
  /* 给容器加左右内边距，避免小屏幕上内容贴边 */
  padding: 0 1rem;
  width: 100%;
}

.button-section .container-gif #gif-socrates {
  /* 用百分比设置宽度，实现响应式缩放 */
  width: 25%;
  /* 给图片左右加间距，避免和文本贴得太近 */
  margin: 0 2rem;
}

.button-section .hello,
.button-section .socrates-name {
  /* 用clamp实现响应式字体：最小1.5rem，最大2rem，中间随屏幕宽度自适应 */
  font-size: clamp(1.5rem, 3vw, 2rem);
  /* 文本过长时不换行，保持排版整洁 */
  white-space: nowrap;
}

方案二：CSS Grid（适合更复杂的布局场景） #

HTML结构和Flexbox方案一致，仅调整CSS：

.button-section .content-container {
  /* 启用Grid布局 */
  display: grid;
  /* 三列布局：两侧文本占剩余空间，中间列自适应图片宽度 */
  grid-template-columns: 1fr auto 1fr;
  /* 垂直方向居中对齐 */
  align-items: center;
  /* 设置列之间的间距 */
  gap: 2rem;
  padding: 0 1rem;
  width: 100%;
}

.button-section .container-gif #gif-socrates {
  width: 25%;
  /* 给图片设置最小宽度，避免小屏幕上缩得太小 */
  min-width: 150px;
}

.button-section .hello {
  text-align: right; /* 左侧文本右对齐，更贴近图片 */
}

.button-section .hello,
.button-section .socrates-name {
  font-size: clamp(1.5rem, 3vw, 2rem);
}

为什么这两种方案更优？ #

• 不需要依赖position: absolute和固定的top/left像素值，不会在不同屏幕尺寸下出现错位
• 自带响应式特性，子元素会自动根据容器宽度调整位置和大小
• 用clamp()设置字体大小，能让文本在不同设备上自动适配，避免过大或过小

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