Solution 1 :

add to your RoundIcon definition
transform: translateY(-2px);

Problem :

I have the following Round Icon, which I style with styled-components:

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

And I display this round icon center-aligned next to some text, like so:

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

I like this, but I’d like to move the icon up a pixel or two now. I’m not sure how to do this though without moving the text next to it?


Comment posted by R. Kohlisch

couldnt I just add this into its styled-component definition?

Comment posted by slumbergeist

@Lyokolux adding