CSS：移动“border-radius 50%”-向上循环 2px？答案

【问题标题】：CSS: Move "border-radius 50%"-Circle up by 2px?CSS：移动“border-radius 50%”-向上循环 2px？
【发布时间】：2020-08-03 05:38:53
【问题描述】：

我有以下圆形图标，我用styled-components 设置样式：

const RoundIcon = styled.span`
  height: 10px;
  width: 10px;
  border-radius: 50%;
  display: inline-block;
  background-color: blue;
`

我在一些文本旁边显示这个圆形图标居中对齐，如下所示：

<Box>
  <RoundIcon />
  <p style={{ display: 'inline-block', marginLeft: '10px' }}>Hello</p>
</Box>

我喜欢这个，但现在我想将图标向上移动一两个像素。我不确定如何在不移动文本旁边的情况下执行此操作？

【问题讨论】：

【解决方案1】：

添加到您的 RoundIcon 定义中变换：translateY(-2px);

【讨论】：