CODEWITHSUNDEEP
htmlcssreactjs
TheRealFakeNews
TheRealFakeNews

Reputation: 8173

CSS - How to shift a span elements content downward

I have a drop down menu button that sits in a span:

enter image description here

Don't mind that it's not horizontally centered (that's just a poor screen shot). What I want to do is vertically center it, but not by using position. Instead I would like to shift it down by a pixel or two. How can I do this?

Here's my styling:

<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',
  }}/>

Upvotes: 0

Views: 1294

Answers (2)

Alexander Staroselsky
Alexander Staroselsky

Reputation: 38827

You can use 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'
  }}/>

This is effectively what @AllanJiang proposed with paddingTop, but margin won't affect the clickable size of the element, if that's an issue.

Upvotes: 2

Allan Jiang
Allan Jiang

Reputation: 11331

You can try use flex box positioning:

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

Upvotes: 0

Related Questions