CSS - 如何向下移动span元素内容

Question

我有一个位于范围内的下拉菜单按钮：

不要介意它不是水平居中（这只是一个糟糕的屏幕截图）。我想要做的是垂直居中，但不是使用position。相反，我想将向下移动一两个像素。我怎么能这样做？

这是我的造型：

<span
  className={ 'arrow-down' }
  style={{
    float: 'right',
    display: 'block',
    height: '12px',
    lineHeight: '12px',
    width: '12px',
    borderRadius: '30px',
    backgroundColor: '#ffbf44',
    color: 'black',
    textAlign: 'top',
    fontSize: '1.25em',
  }}/>

Answer 1

您可以使用margin-top：

<span
  className={ 'arrow-down' }
  style={{
    float: 'right',
    display: 'block',
    height: '12px',
    lineHeight: '12px',
    width: '12px',
    borderRadius: '30px',
    backgroundColor: '#ffbf44',
    color: 'black',
    textAlign: 'top',
    fontSize: '1.25em',
    marginTop: '2px'
  }}/>

这实际上是@AllanJiang用paddingTop提出的，但是如果这是一个问题，保证金不会影响元素的可点击大小。

Answer 2

您可以尝试使用弹性盒定位：

spanStyle: {
    display: 'flex',
    flexDirection: 'column',
    alignItems: 'center',
    justifyContent: 'center',
    paddingTop: 2, <--- in case you want to adjust the position manually
}