Is there a way to center links?

[johjeff]

Things I have tried

<p align=“center”>
[[000 Master Index]] ○○○ [[100 Personal Index]]
</p>

<center>
[[000 Master Index]] ○○○ [[100 Personal Index]]
</center>

Result is the same - text is centered, but links are not links anymore.

What I’m trying to do

Trying to center the links back to MOCs. Is there a way to center links? Not sure why using the HTML above disables the linking.

Any tips?

Thanks.

[ryanjamurphy]

You can’t render markdown inside a block of HTML. The exception is inline HTML: <span style="align: center"> should work.

However, the better solution would be to add a CSS snippet for the links you want. You can add a class: MOC attribute to the YAML metadata any given MOC notes, then do something like:

.moc .internal-link {
    align: center
}

to center links on those MOCs.

[johjeff]

Thanks for the tips!

Question about the second solution with the .moc internal link - I do have links to other MOCs in the MOCs, but the centering I was trying to do is in a regular note that links back to the relevant MOC[s].

Kind of like a breadcrumb trail, or just jumps to other relevant content. So the navigational links I am trying to center would maybe be in a daily note, or ZK note, or lit note. Would the CSS snippet work in this case? Also, how would I specify this in my note?

Here is an example:

---
type: Daily
tags: #daily #dailynote #2021 #may #wed
---
# 2021-06-03

    [[000 Master Index]] ○○○ [[100 Personal Index]]  ○○○ [[200 Daily Index]]     <==Would like to center this


------

![[🎯 TODO]]

![[🎉 Scheduled Time Off#2021 TIME OFF]]

------

It’s mostly an aesthetic thing, so not super important I guess, but I would like to be able to do it.

Thanks again.

[mnvwvnm]

When @ryanjamurphy suggests the class: MOC that is a suggestion for a class name, not the ‘real’ MOC (you just need to find a name not incompatible with existing ones, e.g. center-menu).

You can try this:

<span class="center-menu">[[000 Master Index]] ○○○ [[100 Personal Index]] ○○○ [[200 Daily Index]]</span>

Then create a CSS snippet like this:

.center-menu {
  display: block;
  text-align: center;
}