Css 反应器中的水平线

我有一个登录页面，有两个登录按钮。一个用于常规登录，另一个用于谷歌登录。我正试图实现一种带有“或”字的水平线风格。照片上的东西附在后面

我的问题是如何在“或”字的两边画线。我认为

RemoveIcon

不适合它

请检查我的代码沙盒在这里

登录
或
{" "}
使用谷歌登录

您只需将

alignItems:“center”

添加到“center”类中

您可以使用伪元素自定义线条的外观

or: {
  position: "relative",
  marginBottom: "10px",
  "&:before, &:after": {
    content: "''",
    display: "inline-block",
    height: "1px",
    width: "40%",
    background: "#00000044",
    position: "absolute",
    top: "50%"
  },
  "&:before": {
    transform: "translate(-70%, -50%)"
  },
  "&:after": {
    transform: "translate(70%, -50%)"
  }
}

<div className={`${classes.center} ${classes.or}`}>OR</div>

或：{
职位：“相对”，
marginBottom：“10px”，
“&：之前和之后”：{
内容：“''”，
显示：“内联块”，
高度：“1px”，
宽度：“40%”，
背景：“00000044”，
位置：“绝对”，
顶部：“50%。”
},
“&：之前”：{
转换：“翻译（-70%，-50%）”
},
“&：之后”：{
转换：“翻译（70%，-50%）”
}
}
或

---

这里解决了同样的问题：一如既往的出色工作。非常感谢。

or: {
  position: "relative",
  marginBottom: "10px",
  "&:before, &:after": {
    content: "''",
    display: "inline-block",
    height: "1px",
    width: "40%",
    background: "#00000044",
    position: "absolute",
    top: "50%"
  },
  "&:before": {
    transform: "translate(-70%, -50%)"
  },
  "&:after": {
    transform: "translate(70%, -50%)"
  }
}

<div className={`${classes.center} ${classes.or}`}>OR</div>