CSS - 如何轉變的跨度元素含量下降

不介意它不是水平居中（這只是一個貧窮的屏幕射擊）。我想要做的是垂直居中，但不使用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', 
    }}/>

來源

2017-01-24 AlanH

您可以使用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，但邊距不會影響元素的可點擊大小，如果這是個問題。

來源

2017-01-24 21:36:26

你知道我會如何在它周圍添加大綱？對不起，忘了在帖子中提問。 'outline'不起作用 – AlanH

你會把我們CSS屬性'border'。一個可能的值可能是固體1px＃000000'爲一個純黑色邊框。 –

您可以嘗試使用柔性軸箱定位：

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

來源

2017-01-24 21:35:04

CSS - 如何轉變的跨度元素含量下降

回答

相關問題