'Align button and button content within a line

I am trying to highlight a section of text and also display a button next to the section. However, I can't get the elements to where I want them, which is vertically centered.

Here is the corresponding CodePen.

As you can see, I'm using the hackJob-class to manually move the button box so that the 'x' is centered within the button, but now the buttons is too high.

What I would have wanted is to find a way to

  • (automatically) center the button in relation to the other text
  • (automatically) center the 'x' / SVG in that box

...without worrying about realigning it every time I the dimensions change a bit.

For now, moving the 'x'/SVG down would already help!

I'm sure I'm missing something obvious and would really appreciate some help!

htmlcsssvgvertical-alignment


Solution 1:[1]

you could add

display: inline-flex;
justify-content: center;

to the .outerWrap class.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 John_H_Smith

Related Questions