使用样式化组件 ReactJS 将图像右对齐答案

【问题标题】：Aligning Image to the Right w/ Styled Component ReactJS使用样式化组件 ReactJS 将图像右对齐
【发布时间】：2021-12-21 20:44:58
【问题描述】：

我对 ReactJS 还很陌生，并且正在使用样式化组件来显示图像。我在 App.js 中的代码是 <StyledImage src={mainimg} alt="hi"></StyledImage>，它在屏幕左侧显示图像。我的风格是

export const StyledImage = styled.img`
  width: 80%;
`;

我尝试过 justify-content、alignitems... 我不确定要输入什么内容才能使其在容器右侧对齐。有什么建议吗？

【问题讨论】：

justify-content 和 align-items 用于对齐子组件。尝试在其父容器上添加 display: flex 和 justify-content:。
@Archivec 它的父容器也有其他组件（例如导航栏），并且更改 justify-content 并在父容器上显示会改变导航栏的外观。我是否需要添加另一个 div 并对其进行更改，或者最好的方法是什么？
在这种情况下，您可以将 justify-self 用于图像本身（如果其父级不显示，则为 flex-start：flex 或仅“开始”，如果是），或者添加另一个 div 作为你说。有一个例子here
@Archivec 添加对齐内容 (right/flex-start/start) 似乎不会改变 img 的任何行为，添加另一个 div 并使用 display: flex 和 justifyContent: center 也不是改变任何东西:(

【解决方案1】：

好的，您需要将justify-content 和align-item 属性设置为图像的父节点，以将子节点移动到父节点中。如果您不想为父级设置任何属性，请对您的图像使用 position: absolute 或 position: fixed。

【讨论】：

【解决方案2】：

使用float: "right" 作为样式。

【讨论】：