I am a beginner but usually I somehow find a solution to my problem. But not this time. I managed to code a box: Centered in the box there is the text "#01 Grunderna". This box looks nice.

However, when the text in the middle of the box is longer like "#02 Profil & Scensamlingar" then the text is overwrapping the box. Moreover, the text is not centered vertically.

Is there a way to be able to adjust this? I tried with font-size but it is still overwrapping the box, it is still not adjusted to the middle and the space between the lines stands the same.

Sorry for my lack of knowledge. Would be awesome to get some help.

By the way: Here you can see the mess

enter image description here

CodePudding user response：

Remove the css rule padding: 1rem 1rem; from .home-service a. And add below css rule:

.home-service {
  display: flex;
  align-items: center;
  justify-content: center;
}

Links in those boxes will be justified vertically and horizontally.

CodePudding user response：

Thank you so very much for solving my problem. It is like magic :) You should see my smile!

Anyway, I added it as additional css in the customize theme section as I did not find it in the theme editor yet. I guess it is better to do the changes exactly as you mentioned in the theme-editor or does it not matter?