CSS is just not my forte. In my research I have located several threads about using CSS to change the region styling, but none that does what I need and I haven't been able to make the leap to convert the supplied solutions into what I need. I'm using Apex 18.2. I want the region header of the standard template to be centered rather than left-justified.
I found one note for changing the region header height that supplied the following CSS:
.t-Region-headerItems--title {
padding: 2.0rem 1.2rem;
}
From that, I would have thought that centering the region title would simply be:
.t-Region-headerItems--title {
text-align: center !important;
}
However, that doesn't work. Given the template text (below), I also tried using other tags (t-Region-headerItems and t-Region-header) but that didn't work either. Can anyone with more CSS chops than I have supply the proper syntax, please?
<div class="t-Region #REGION_CSS_CLASSES#" id="#REGION_STATIC_ID#" #REGION_ATTRIBUTES#>
<div class="t-Region-header">
<div class="t-Region-headerItems t-Region-headerItems--title">
<span class="t-Region-headerIcon"><span class="t-Icon #ICON_CSS_CLASSES#" aria-hidden="true"></span></span>
<h2 class="t-Region-title" id="#REGION_STATIC_ID#_heading">#TITLE#</h2>
</div>