The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> class= "small" and style="text-align:center" won't work together
Naga
post May 30 2024, 06:15 PM
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:
Attached Image

The colors are only to differentiate the parts but are not important tongue.gif

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!
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post May 30 2024, 07:58 PM
Post #2


.
********

Group: WDG Moderators
Posts: 9,804
Joined: 10-August 06
Member No.: 7



Hi and welcome!

QUOTE(Naga @ May 31 2024, 01:15 AM) *

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".
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Naga
post May 31 2024, 03:22 PM
Post #3





Group: Members
Posts: 2
Joined: 30-May 24
Member No.: 29,180



That was so helpful, thank you so much! smile.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post May 31 2024, 04:01 PM
Post #4


.
********

Group: WDG Moderators
Posts: 9,804
Joined: 10-August 06
Member No.: 7



You're welcome!
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
2 User(s) are reading this topic (2 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 16th May 2025 - 06:22 PM