How To Center The Custom H3 Tag?
Shirley Craig
Currently I've set the H3 tag styles to replicate the image shown below in the screenshot as it was necessary to use text and css instead of an image in a Joomla article. The examples are shown below in screenshot. It adds a styled line below the text but I'm having trouble centering this.
https://screenrec.com/share/kEY8hlwrci
The examples of how to center H3 tag on the web are quite beyond me so any help would be much appreciated on how to get this centered on the page.
Thanks,
Paul Frankowski
Accepted AnswerHi Shirley,
If we talk about CSS, in general we do not teach CSS here. I hope you read & know why.
In your case, for a single use, I would add only that HTML:
<h3 style="display: block; text-align: center">
<span style="font-size: 36pt; font-weight: 600; border-bottom: 15px solid #888;">
HOW WE DO IT</span>
</h3>But delete that part
h3::before {
content: '';
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 5px;
background-color: gray;
}
h3 {text-align: center !important; position: relative; display: inline-block;}becuase in that form are NOT needed !
If this same H3 style with line you want to use on all subpages, syntax is also simple:
<h3><span>HOW WE DO IT</span><h3>
with basic CSS:
h3 { display: block; text-align: center;}
h3 > span { font-size: 36pt; font-weight: 600; border-bottom: 15px solid #888;}