如何实现左侧图片与右侧边框之间的引用文案居中布局

解决方案 #

你当前的代码存在几个核心问题：使用了仅适用于表格的<caption>标签做普通文本容器、float布局难以实现垂直居中、存在不合理的极端尺寸配置，我们可以用flex布局快速实现需求：

修改后的完整代码

CSS代码

body {
  background-color: grey;
}

#img-div {
  width: 100%;
  max-width: 900px; /* 可根据实际需求调整最大宽度，适配图片+引用的总宽度 */
  height: auto;
  margin: 0 auto 2em;
  display: block;
  border-style: outset;
  padding: 10px;
  border-image-width: auto;
}

/* 新增图片+引用的外层flex容器，实现横向排列+垂直居中 */
.img-content-wrap {
  display: flex;
  align-items: center; /* 垂直居中对齐所有子元素 */
  gap: 20px; /* 图片和引用之间的间距，可自行调整 */
  margin-bottom: 15px;
}

#image {
  border: groove;
  max-width: 500px;
  height: auto;
}

#img-caption {
  font-size: 24px; /* 修复原300px的错误配置，可自行调整大小 */
  border-right: 3px solid #fff; /* 你需要的右侧边框线，要改边框样式/颜色可直接调整这个属性 */
  padding-right: 20px; /* 边框和文字之间的间距，可自行调整 */
  text-align: center; /* 文案水平居中 */
  flex: 1; /* 占满图片之外的剩余宽度 */
}

figcaption {
  clear: both;
  font-style: italic;
  text-align: center;
}

HTML代码

<body>
  <div id="img-div">
    <!-- 新增flex包裹层 -->
    <div class="img-content-wrap">
      <img id="image" alt="steve Irwin" src="https://via.placeholder.com/100">

      <!-- 替换caption为普通div，caption标签只能用于表格元素内，无法在普通div中正常生效 -->
      <div id="img-caption">
        "我们不属于地球，地球才是我们的归属。我们必须和所有野生动物共享这片土地"
        <br>
        <p>- 史蒂夫·欧文</p>
      </div>
    </div>

    <figcaption>
      "鳄鱼猎手"史蒂夫·欧文于2002年6月26日在加利福尼亚州旧金山动物园，与一只3英尺长的短吻鳄合影。
    </figcaption>
  </div>
</body>

关键调整说明

• 用flex布局替代原float布局，align-items: center属性直接实现所有子元素的垂直居中，不需要额外计算偏移
• 替换了错误的<caption>标签，该标签仅能在<table>元素内使用，在普通容器中不会生效
• 移除了原#img-div不合理的padding-right: 500px配置，调整为适配内容的弹性内边距
• 可根据你的需求调整边框的位置、颜色、粗细，以及字体大小、间距等参数

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