Center column header

Hi! Does anyone know how to center a specific table column header? I don’t want to center every column header, just a specific one in a specific table. I tried using the following, which works sometimes, but it’s not working for me:

Header Name
. Thank you!!

CSS:

#view_1 th.field_1 a.level { 
  justify-content: center; 
}

Explanation:

To style anything, you need to find its CSS Selector. To find CSS Selectors, you can right-click on any element on the screen and click “Inspect”. Here’s an example of how that looks:

Screen Shot 2022-09-07 at 6.05.34 PM.png

Here’s an explanation of how CSS Selectors work:

https://www.w3schools.com/cssref/css_selectors.asp

For example, to select all table headers, the selector is th

th {
}

To select table headers with a class of “field_29”, the selector is th.field_29

th.field_29 {
}

To further restrict this to a specific view ID, you can add another selector before it, like this:

#view_123 th.field_29 {
}

Your styles go inside the curly braces { }

Hope this helps

2 Likes

Thanks so much @KnackPros!! That worked great! Now the only issue is when I put a
between words in the header…that makes the word after the break not centered. Any tweak I need to make to the code? This is what I have so far:
/Center text/
#view_1195 th.field_860 a.level {

justify-content: center;
}

I just added “text-align: center;” to the code and it seems to be working with the line break…THANK YOU IAN!!

/Center text/
#view_1195 th.field_860 a.level {
justify-content: center;
text-align: center;
}