如何使用CSS实现div内锚点标签与图片同水平行且锚点居中

数据老陈

2026-10-3

问题根因

你当前给.info容器设置了flex-flow: column，所有直接子元素（h2、img、.links容器）都会纵向排列，所以图片和链接容器自然上下分布，和你要的效果不符。

修改方案

你只需要给图片和链接容器套一层横向排列的flex父容器即可，完整修改后的代码如下：

<style>
 div {
    border: 1px solid black;
    margin: 1em;
  }
  h2 {
    text-align: center;
  }

  .info{
    display: flex;
    flex-flow: column; 
    min-height: 500px; /* 可以根据需求调整容器高度 */
  }
  /* 新增的内容容器，用来包裹img和链接，横向排列 */
  .content-wrapper {
    display: flex;
    align-items: center; /* 让图片和链接垂直方向居中对齐 */
    gap: 20px; /* 可以调整图片和链接区域的间距 */
    flex: 1;
  }
  .links{
    border: none;
    flex: 1; /* 占满图片之外的所有横向空间 */
    text-align: center; /* 链接在自己的区域内水平居中 */
  }
</style>

<div class="info">
  <h2>Welcome</h2>
  <!-- 新增的包裹层 -->
  <div class="content-wrapper">
    <img src="IMAGE-SRC" alt="Picture" height="300px" width="300px">
    <div class="links">
      <a href="">GitHub</a>
      <a href="">LinkedIn</a>
      <a href="">Instagram</a>
    </div>
  </div>
</div>

实现原理

Flex布局的排列方向由flex-direction控制，默认是横向（row），设置为column就是纵向。我们拆分了两层flex容器：外层.info是纵向排列，保证h2在顶部；内层.content-wrapper是横向排列，保证图片和链接同排。
flex:1的作用是让元素占满父容器的剩余可用空间：给.content-wrapper设置flex:1后会占满h2之外的所有纵向空间，给.links设置flex:1后会占满图片之外的所有横向空间，配合text-align:center自然就能实现链接在对应区域居中。
align-items: center让横向flex容器里的子元素垂直方向居中，避免出现图片和链接错位的情况。