How can I centrally align text in my callouts?

[NordeN]

I do program in Python and C# and not familiar with HTML and CSS.

I noticed that the text in callouts boxes is not centered in relation to the box icon. Could you please tell me how I can center my text vertically? I think that I can write CSS snippet but I don’t know how to centrally align text in HTML/CSS.

[wolfick]

You can use this code in a snippet to center all text in callout boxes

.cm-callout {
	text-align: center;
}

Or if you prefer to only have it on some pages, rename .cm-callout to something unique (.callout-centered) and then add that css class into the note properties.

[ariehen]

I don’t quite follow in what you are asking for. This is a callout in the default theme:

> [!NOTE] Title of callout
> Contents of callout

Could you point to where you want to “center my text vertically”?

[NordeN]

I see this:

Windows 10, Font: Monaco 13

But I have already wrote CSS snippet to fix it (very bad)

.callout-title {
    gap: 13px;
}

.callout-title-inner {
    margin-top: 3px;
}

I will be glad if someone help me to fix this without hardcode something in snippets

[rigmarole]

What theme are you using? If someone wants to offer a better snippet, it would make it easier to test if we start from the same point you are at.

If you switch to the default theme (just to test), is it centered? (To isolate if it’s a font problem instead of a theme problem.)

[ariehen]

Understood. A callout with only text in the title area.

> [!NOTE] Title of callout

The callout icon doesn’t change size when you adjust the font size, so it looks odd at smaller sizes (to me anyway). As rigmarole mentioned, knowing the theme you are using could help here. It could be Manaco and the smaller font size is the issue.

[NordeN]

Theme: Tokyo Night. Default theme has the same problem, I think that problem in font, but I love this font and want to use them.

[ariehen]

You could give this a try:

.callout .callout-title-inner {
    align-self: center;
}

It seems to help with the smaller font sizes.

[NordeN]

Not working for me, I use 13 font size

[ariehen]

Interesting. This is what I see on macOS, using the Tokyo Night theme, Monaco at 13px, and no snippets active:

And with the font-size at 10px toggling .callout .callout-title-inner {align-self: center;} off and on:

---

Can you try setting Monaco in the Sandbox vault as a test to rule out any issues with your main vault?

[NordeN]

Btw, I use Windows 10 and Monaco font is not native font for Windows. I downloaded it somewhere (idk where, it was a long time ago)

[ariehen]

Windows 11, Obsidian v1.8.9, Monaco download from here, and font size set at 13 in the Sandbox vault:

I’ll suggest again trying in the Sandbox vault with only changing the Text font to Monaco and size to 13.