Centering a text doesn't work in live preview

[sizhky]

Describe the bug Using "text-align: center" does not align the the text to center

To Reproduce Steps to reproduce the behavior:

1. Add to custom.css the following class

   .centered-text {
   text-align: center !important;
   background-color: rgba(200, 233, 22, 1.0);
   }

2. Add the text this is my random text `class: centered-text`
3. The text is coloured as expected but not in the center but this happens only in live-preview

Expected behavior The text should be coloured and in the center in live preview

Screenshots

Device (please complete the following information):

• Operating System: MacOS
• Obsidian version: v1.1.16

[LilaRest]

Hi @sizhky ! Thanks for reporting this bug. Unfortunately I'm not maintaining this repository anymore as I don't use it anymore. (was using it for frontmatter, but have replaced it by callouts, see here)

However, I'll be happy to accept any contributions, so feel free to PR :)

[sizhky]

Thanks for responding. Unfortunately I'm a noob in javascript and moreso developing something for obsidian. Could you maybe give me a couple of pointers on where to look at for me to get started on a possible solution?

[LilaRest]

Thanks for responding. Unfortunately I'm a noob in javascript and moreso developing something for obsidian. Could you maybe give me a couple of pointers on where to look at for me to get started on a possible solution?

@sizhky After looking to your problem more carefully, I'm pretty sure you can find a workaround without having to get your hands in JS ! :D

Firstly, on my side it works well:

As you can see, the background color reveals that the <p> element that contains the text is taking the whole note width, which for some reasons is not the case on your side.

I can't pinpoint the problem without going through all the CSS declarations applied to this line of your note, but here is a possible workaround:

.centered-text {
  display: block;
  width: 100%; /* Maybe display block is already enough ? */
  text-align: center !important;
  background-color: rgba(200, 233, 22, 1.0);
}

[sizhky]

I'm unable to reproduce what you're saying even in a blank obsidian vault! 🤔 Anyway I'm closing the issue as I don't find it pressing enough to pursue. If anyone sees this they can feel free to refer this or reopen

[LilaRest]

I'm unable to reproduce what you're saying even in a blank obsidian vault! thinking Anyway I'm closing the issue as I don't find it pressing enough to pursue. If anyone sees this they can feel free to refer this or reopen

If you're fluent with HTML/CSS you can inspect your document and try making this paragraph taking the whole width. The problem is not that text-align: center is not applied, it is that the <p> element doesn't take the entire width for some reasons. ^^