使用样式化组件在中心对齐图标答案

【问题标题】：Align Icon on Center Using Styled Components使用样式化组件在中心对齐图标
【发布时间】：2021-12-26 08:54:33
【问题描述】：

我有一个要居中对齐的图标。我的问题是，它不能很好地对齐。我正在使用样式化组件。

这是我的密码箱 CLICK HERE

const Play = styled.div`
  position: absolute;
  top: 50%;
  left: 50%;
`;

【问题讨论】：

标签： css reactjs styled-components

【解决方案1】：

const Play = styled.div`
  position: absolute;
`;

去掉top和left，把VideoBanner、Play放在div里面，增加了一些风格。

style={{
          display: "flex",
          flexDirection: "column",
          justifyContent: "center",
          alignItems: "center"
        }}

在这里查看CodeSandbox

【讨论】：

【解决方案2】：

图标已经在中心，但从左边缘开始。根据您的要求，将 transform: translateX(-50%); 添加到您的 Play 中

const Play = styled.div`
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%);
`;

这将向左平移其自身宽度的 50%

【讨论】：

左右固定，上下不固定。还是有点太低了？

【解决方案3】：

在您的示例中，播放按钮从顶部和左侧开始划分为 50%。例如，您的分割宽度为 100 像素，该分割将从 50%（父 div 的中心）开始到 50% + 100 像素，这就是它显示为右对齐的原因。

你必须让你的游戏风格组件像：

const Play = styled.div`
    width: 60px;
    height: 60px;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
`;

这是您想要的示例。请CHECK HERE

【讨论】：