0

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!

Markstar
  • 639
  • 9
  • 24
  • 1
    Does this answer your question? [How can I vertically center a div element for all browsers using CSS?](https://stackoverflow.com/questions/396145/how-can-i-vertically-center-a-div-element-for-all-browsers-using-css). Please check [this answer](https://stackoverflow.com/a/41164964). – nicael Apr 08 '22 at 11:51
  • Yes, (inline-)flex seems to be the answer, at least for the outer positioning. I'm still hopeful about finding something for aligning the contents of the button. – Markstar Apr 08 '22 at 12:13

1 Answers1

1

you could add

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

to the .outerWrap class.

John_H_Smith
  • 334
  • 2
  • 12
  • Thank you! I still need the `hackJob`-class (adjusting margins) for aligning the x, but at least it stays centered, can be easily adjusted and it does seem to stay consistent when other dimensions change. :) – Markstar Apr 08 '22 at 12:12