How to align the text of titles in panels?

[Brausepaule]

Hi,

i do know that you simply can add a html part above the charts to replace the actual panel title and that class used in the html part is easily centered. However it is not as wide as the chart below.

You also can use css to change the style of the panel title itself, but fpr some reason it has a weird offset and is not truly centered. The same is true for chart titles...

Back in a project i found a way to use flexbox to truly center the native .panel-title style

But for the hell of me, i can not put it back together. The problem is that the flexbox itself is already not centered in the panel header.

Any ideas are greatly appreciated.

Kind regards,

Mike

[Brausepaule · Accepted solution]

Hi,

i gave up with flexbox...maybe it is even matter of chrome, firefox, etc.

I ended up using the common approch with an h2 mimic via css styles:

On the left is the centerd title for the original panel-title with the weird negative offset

In the middle is the standard version of the h2 mimic which i always found to be a bit hard on the eyes in relation to the charts

on the right ist the h2-mimic with margins...

.h2-mimic {
background:#177843 !important;
color:white !important;
text-align: center !important;
font-weight: bold !important;
border-top-right-radius: 15px;
border-top-left-radius: 15px;
height: 38px; !important;
margin-top: -10px; !important;
margin-left: -10px; !important;
margin-right: -10px; !important;
display: flex; !important;
justify-content: center; !important;
align-items: center; !important;
font-size: 16px; !important;
}

Kind regards,

Mike