How to vertically center labels? (CSS question)

[Flrian]

I installed GNOME earlier today and since then pretty much all labels are out of alignment, no clue why. I'm not very good with CSS, I tried a bunch of stuff, but nothing really worked. The only thing that somewhat did was adding a padding-top, but then the cjk font from the spotify font title would still be lower than the regular text.

Any idea how I can get the labels to be vertically centered again?

sfwbar.css

@define-color accent_bg_color #3584e4;

#hidden {
	-GtkWidget-visible: false;
}

grid#taskbar {
	min-height: 30px; /* taskbar height */
}

grid#modules,
grid#timedate {
	background-color: transparent;
	padding-right: 2px;
	-GtkWidget-vexpand: true;
	-GtkWidget-valign: center;
}

button,
button image {
	min-height: 16px;
	min-width: 16px;
	background-color: transparent;
}

#taskbar_item image {
	-GtkWidget-vexpand: true;
}

#menu_item image,
button#taskbar_normal image,
button#taskbar_active image,
button#taskbar_inactive image {
	padding: 0 4px;
}

button#taskbar_item label {
	padding-right: 4px;
}

button#startmenu {
	padding-left: 6px;
	padding-right: 4px;
	background-color: transparent;
	-GtkWidget-vexpand: true;
	-GtkWidget-valign: center;
}

button#taskbar_item {
	background-color: @theme_bg_color;
	padding: 2px;
}

button#taskbar_item:hover {
	background-color: alpha(@theme_fg_color, 0.333);
}

button#pager_item.focused,
button#taskbar_item.focused {
	background-color: alpha(@accent_bg_color, 0.333);
}

button#pager_item.focused label {
	font-weight: bold;
}

button#taskbar_item,
button#pager_item {
	background-clip: padding-box;
	border-radius: 9px;
	border-width: 3px;
	border-style: solid;
	border-color: transparent;
}

button#startmenu image,
button#module image,
image#volume_control_expander,
image#volume_default,
image#volume_client_menu,
image#volume_mute {
	-ScaleImage-color: @theme_fg_color;
	/* -ScaleImage-symbolic: true; */
}

/* Reduced padding for tray + module icons */
button#module,
button#tray_item,
button#pager_item {
	padding: 2px;
}

label {
	font: 12px Sans;
}

[LBCrion]

Try adding: -GtkWidget-vexpand: true; -GtkWidget-valign: center; to your label css. The first line tell the label widget to use all available vertical space. The second one tells it to center the text vertically within this available space.

…

On Fri, 27 Dec 2024, 01:58 Florian, ***@***.***> wrote: I installed GNOME earlier today and since then pretty much all labels are out of alignment, no clue why. I'm not very good with CSS, I tried a bunch of stuff, but nothing really worked. The only thing that somewhat did was adding a padding-top, but then the cjk font from the spotify font title would still be lower than the regular text. Any idea how I can get the labels to be vertically centered again? 2024-12-27T02.45.24.png (view on web) <https://github.com/user-attachments/assets/4b2718da-18df-4609-8732-b97fce8f8db7> sfwbar.css @define-color accent_bg_color #3584e4; #hidden { -GtkWidget-visible: false; } grid#taskbar { min-height: 30px; /* taskbar height */ } grid#modules, grid#timedate { background-color: transparent; padding-right: 2px; -GtkWidget-vexpand: true; -GtkWidget-valign: center; } button, button image { min-height: 16px; min-width: 16px; background-color: transparent; } #taskbar_item image { -GtkWidget-vexpand: true; } #menu_item image, button#taskbar_normal image, button#taskbar_active image, button#taskbar_inactive image { padding: 0 4px; } button#taskbar_item label { padding-right: 4px; } button#startmenu { padding-left: 6px; padding-right: 4px; background-color: transparent; -GtkWidget-vexpand: true; -GtkWidget-valign: center; } button#taskbar_item { background-color: @theme_bg_color; padding: 2px; } button#taskbar_item:hover { background-color: ***@***.***_fg_color, 0.333); } button#pager_item.focused, button#taskbar_item.focused { background-color: ***@***.***_bg_color, 0.333); } button#pager_item.focused label { font-weight: bold; } button#taskbar_item, button#pager_item { background-clip: padding-box; border-radius: 9px; border-width: 3px; border-style: solid; border-color: transparent; } button#startmenu image, button#module image, image#volume_control_expander, image#volume_default, image#volume_client_menu, image#volume_mute { -ScaleImage-color: @theme_fg_color; /* -ScaleImage-symbolic: true; */ } /* Reduced padding for tray + module icons */ button#module, button#tray_item, button#pager_item { padding: 2px; } label { font: 12px Sans; } — Reply to this email directly, view it on GitHub <#295>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ASHPFFENRDUZXN2777BQCIL2HSX4TAVCNFSM6AAAAABUH57XWCVHI2DSMVQWIX3LMV43ERDJONRXK43TNFXW4OZXG42DONBUGE> . You are receiving this because you are subscribed to this thread.Message ID: ***@***.***>

[Flrian]

Tried it, didn't work. After adding the lines I also noticed something strange with my calendar widget (copied from micko).
Before:

After:

Unless I'm misunderstanding something very heavily, the border around the label shouldn't get smaller, right?

How the hell does installing GNOME screw with the css like that? Or did I just not see it before? But I swear I wouldn't miss something like that.

I've also tried using the default gtk theme instead of adw-gtk3 and removing my css, but that doesn't help either. Weirdly enough, if I only remove the font size but leave the lines you told me to add it seems fine, but then obviously the font is bigger than I'd like.

[Flrian]

I just noticed that its not just sfwbar actually, looks like something somewhere on my end is screwed up. If you look at Nautilus you can see the same issue with the text next to the icons not being vertically centered.

Thanks for your help anyways. This one is going to be weird to figure out. 😂

Edit: Nevermind.. Just reinstalled GNOME and rebooted and now Nautilus is fine again. I'm about to pull my hair out, wth.

[LBCrion]

I would expect this is due to a theme gnome installed. This is probably fixable via css changes, but you would need to know what to change. The most likely culprits would be padding, margin and border settings.

…

On Fri, 27 Dec 2024, 14:01 Florian, ***@***.***> wrote: I just noticed that its not just sfwbar actually, looks like something somewhere on my end is screwed up. If you look at Nautilus you can see the same issue with the text next to the icons not being vertically centered. 2024-12-27T14.59.05.png (view on web) <https://github.com/user-attachments/assets/55782cbc-9fda-42b1-9d81-76108d12c45a> Thanks for your help anyways. This one is going to be weird to figure out. 😂 — Reply to this email directly, view it on GitHub <#295 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ASHPFFFPQELCC4LKV44ZLVT2HVMUVAVCNFSM6AAAAABUH57XWCVHI2DSMVQWIX3LMV43URDJONRXK43TNFXW4Q3PNVWWK3TUHMYTCNRXG43DKMI> . You are receiving this because you commented.Message ID: ***@***.***>

[Flrian]

Turns out it probably wasn't a theme, but GNOME seems to have screwed with my fontconfig settings, so that "Sans" doesn't match my usual font anymore. If I specify "Inter" instead of "Sans" it seems to be fine. 🤷