如何在React中将图片标签移至页脚最右侧？

要实现标题左对齐、图片靠页脚最右侧的效果，核心是利用Flex布局控制h2容器内元素的排列方式，修改Styled Components样式即可，无需调整JSX结构。

修改步骤： #

1. 给h2添加Flex布局属性，让内部元素自动分配空间实现左右分离
2. 调整移动端响应式样式，保证小屏幕下的显示效果

修改后的Styled Components代码： #

const LowerFooter = styled.div`
  margin: 0;
  background-color: #333333;
  color: white;
  padding: 1rem;
  
  h2 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0; /* 清除h2默认margin，避免布局偏移 */
    
    span {
      color: #FFF;
      text-transform: uppercase;
    }
  }

  @media screen and (min-width: 260px) and (max-width: 450px) {
    h2 {
      flex-direction: column;
      align-items: flex-start; /* 保持标题左对齐 */
      gap: 0.5rem; /* 标题和图片之间添加间距 */
      
      span {
        display: block;
      }
    }
  }
`;

说明： #

• display: flex：将h2转换为Flex容器
• justify-content: space-between：让容器内的子元素（版权文本、图片）分别靠向左右两端，自动填充中间空白区域
• align-items: center：确保文本和图片在垂直方向居中对齐
• 移动端媒体查询中设置flex-direction: column，让标题和图片垂直堆叠，适配小屏幕宽度

你的JSX结构无需改动，保持原样即可：

<LowerFooter className="lower__footer">
  <h2>
    &copy;  <span>Random Title</span>
    <img src={image_logo} width='50' height='50' />
  </h2>
</LowerFooter>

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