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

Question

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

这是我的codesandbox CLICK HERE

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

Answer 1

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

删除了 top 和 left，将 VideoBanner、Play 放入 div，并添加了一些样式。

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

点这里CodeSandbox

Answer 2

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

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

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

Answer 3

在您的示例中，播放按钮的 division 从顶部和左侧的 50% 处开始。例如，你的 division 的宽度是 100px，division 将从 50%（父 div 的中心）到 50% + 100px 开始，这就是它显示得有点正确的原因对齐。

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

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

这里是你想要的例子。请CHECK HERE

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

Align Icon on Center Using Styled Components

css

reactjs

styled-components