![]() |
![]() ![]() |
![]() |
Naga |
![]() ![]()
Post
#1
|
Group: Members Posts: 2 Joined: 30-May 24 Member No.: 29,180 ![]() |
Hi everyone!
I'd like to apologize first and foremost for my noobness, but I reached a point where I'm completely blind to the correct way to do it. I want a section of the text (or, more accurately, a divider made with symbols), to be centered while also being small. I tried different methods, but the ones that resembled the result I was looking for were two: ![]() The colors are only to differentiate the parts but are not important ![]() On the first set, A uses the following code, but it won't center. CODE <p class= "small"; style="text-align:center"><br> <span style="color: #7f6868;">• —– ٠ ✤ ٠ —– • </span> </p> B uses this code, so it centers, but the text is not small: CODE <p class= "small"; style="text-align:center"> <span style="color: #7f6868;">• —– ٠ ✤ ٠ —– • </span> </p> The reason I used <span> instead of <p> with A, is because when I tried <p>, the divider was centered but not small at all, and there was quite a huge space between the divider and the text on top. (As you can see with A2) I'm pretty sure there's an easy solution to this, and I feel super bad having to ask, but I really reached a standpoint when I'm unable to see it. So, where have I messed up / how could I get the result I'm after? Thank you so much! Also, English is not my first language, so I apologize if any sentence sounded weird! |
Christian J |
![]()
Post
#2
|
. ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Group: WDG Moderators Posts: 9,804 Joined: 10-August 06 Member No.: 7 ![]() |
Hi and welcome!
On the first set, A uses the following code, but it won't center. CODE <p class= "small"; style="text-align:center"><br> <span style="color: #7f6868;">• —– ٠ ✤ ٠ —– • </span> </p> Note that in the attached screenshot you use SPAN instead of the P above, like this: CODE <span class= "small"; style="text-align:center"><br> <span style="color: #7f6868;">• —– ٠ ✤ ٠ —– • </span> </span> CSS "text-align" only works on block-level elements like P, Since SPAN is an inline element it has no effect on it (unless you use CSS "display: block" to make the SPAN behave like it was a block element). See also https://www.w3schools.com/htmL/html_blocks.asp QUOTE B uses this code, so it centers, but the text is not small: CODE <p class= "small"; style="text-align:center"> <span style="color: #7f6868;">• —– ٠ ✤ ٠ —– • </span> </p> Is any CSS (in a stylesheet) applied to that "small" CLASS? Without CSS, a CLASS name like "small" doesn't do anything by itself --a CLASS name is just an identifyer, the styling takes place in the actual CSS. I'd also recommend not applying CSS using the STYLE attribute, it's very unpractical in the long run. Use a stylesheet instead: https://developer.mozilla.org/en-US/docs/Le...S_is_structured QUOTE The reason I used <span> instead of <p> with A, is because when I tried <p>, the divider was centered but not small at all, and there was quite a huge space between the divider and the text on top. (As you can see with A2) The space is the default margin style of P elements. It can be removed with CSS "margin: 0". |
Naga |
![]()
Post
#3
|
Group: Members Posts: 2 Joined: 30-May 24 Member No.: 29,180 ![]() |
That was so helpful, thank you so much!
![]() |
Christian J |
![]()
Post
#4
|
. ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Group: WDG Moderators Posts: 9,804 Joined: 10-August 06 Member No.: 7 ![]() |
You're welcome!
|
![]() ![]() |
![]() |
Lo-Fi Version | Time is now: 16th May 2025 - 06:22 PM |