How can I center a preface title?

How can I center the preface title?

I tried:

[.text-center]
== PREFACE TITLE

[.text-center]
[.lead]
SOME TEXT +
AND SOME MORE.

Lorem ipsum dolor sit amet, consectetur ...

But this centers the whole preface, not only the title.

The expected result is having both "PREFACE TITLE" and "SOME TEXT" + "AND SOME MORE" centered. The body of the chapter, Lorem ispsum...' should not be centered.

A line like [.text-center] is a role that is applied to the block that follows. It will be automatically translated, in the output, into center alignment of that block.

Well, the section title is the start of a block — the section block. Thus, you are applying this role to the entire section block. That's not what you want, as it gives the result that you have observed, namely, that the whole section ends up centered.

Moreover, you cannot apply a role to just the section title, as you are trying to do, because the section title isn't a block at all; it is merely a kind of feature or property of the section block — it both demarcates the section start and says what the section's heading text should be.

(By contrast, your "SOME TEXT AND SOME MORE." is a block — a paragraph block — and so you can apply center alignment to it, on its own.)

The solution lies in tweaking the behavior of the output engine — which, if you are producing HTML, is the CSS that goes with it. It would be sufficient to modify the CSS so that h2 gets text-align: center;.

However, perhaps that's more than you had in mind, because in that case every h2 will be center-aligned. Let's say you want only this one title, the preface title, to be center-aligned. If so, first apply a custom role to the entire section div:

[.mySection]
== PREFACE TITLE

Now, in your CSS, you can tweak the formatting of just the output of the title of this section, by customizing .mySection > h2. In your case, you would specify text-align: center;.

The simplest way to do this would be to use a docinfo. So, for example, in my .adoc file:

:docinfo: shared

[.mySection]
== PREFACE TITLE

[.text-center]
[.lead]
SOME TEXT +
AND SOME MORE.

Lorem ipsum dolor sit amet, consectetur ...

And in my docinfo.html file, stored in the same directory:

<style>
.mySection > h2 { text-align: center; }
</style>

Result: