ReactJS使用Styled Component如何实现图片右对齐

你之前尝试的justify-content、align-items是Flex布局的容器属性，需要添加在图片的父元素上才能生效，直接写在img元素本身不会产生效果。以下是3种可直接落地的实现方案：

• 方案1：直接修改图片样式（无需改动外层结构）
  给图片设置margin-left: auto搭配块级显示，即可自动撑满左侧空白实现右对齐，样式代码如下：

export const StyledImage = styled.img`
  width: 80%;
  display: block;
  margin-left: auto;
`;

• 方案2：父容器使用Flex布局控制对齐
  给图片外层新增一个父容器，在容器上添加Flex布局和右对齐属性即可：
  父容器样式代码：

export const ImageWrapper = styled.div`
  display: flex;
  justify-content: flex-end;
`;

App.js内的组件调用写法：

<ImageWrapper>
  <StyledImage src={mainimg} alt="hi" />
</ImageWrapper>

• 方案3：借助父容器文本对齐属性
  img属于行内替换元素，会继承父元素的文本对齐规则，给外层父容器设置text-align: right也可实现右对齐：
  父容器样式代码：

export const ImageWrapper = styled.div`
  text-align: right;
`;

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