HTML/CSS question: center text?

[obsidiannovels]

Hi! Can anyone please help me here: How do I make the text within the <p>-tag to be centered? Nothing seems to work...

<p style="background-color: #404040; border: 2px solid; color: red; width: 650px;border-radius: 25px;padding: 20px; background-image: url(https://i.imgur.com/zsIkEvb.jpg); background-size: contain; resize: no; background-attachment: fixed; background-repeat: no-repeat; background-position: center;">
<font color="yellow" style="font-size: 23px;text-align: center;font-weight: bold;text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;">Welcome to our room!</font>
</p>

 

[Siolfor the Jackal]

Been awhile since I did any HTML/CSS but you might need to try using text-align in the parent container of <p>

 

[obsidiannovels]

Been awhile since I did any HTML/CSS but you might need to try using text-align in the parent container of <p>

Thanks a heap, buddy! Seems so obvious I thought I already tried that...

 

[obsidiannovels]

Btw, could you (or someone else) also tell me why the list ends up outside the <p> instead of within it, using this code?

<p style="text-align: center;background-color: #404040; border: 2px solid; color: red; width: 650px;border-radius: 25px;padding: 20px; background-image: url(https://i.imgur.com/cOwrd6Y.jpg); background-size: cover; resize: no;background-repeat: no-repeat; background-position: center;">
<font color="yellow" style="font-size: 23px;text-align: center;font-weight: bold;text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;">Top-10:</font>
<br><br>
<font color="white" style="font-size: 21px;font-weight: bold;text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;">
<ol>
<li> test
</ol>
</font>

</p>

Thanks!

 

[Frolacosta]

Check out this website if you want to do it with CSS (which you should wherever possible) in the future.

http://howtocenterincss.com/

 

[Rayek]

Never EVER use the <font> tag. It's deprecated. Last time I saw it used was last century, the mid 90s. In this case use the span tag instead. And you cannot nest a list inside a font tag. Lists cannot be nested in a paragraph block level tag either.

Your code does not validate at all, and is riddled with nesting errors. The li tag is missing a tail. Here is a cleaned up version. You should get rid of all the local styling as well, and instead place your css in a stylesheet.

<p style="text-align: center;
          background-color: #404040;
         border: 2px solid;
         color: red;
         width: 650px;
         border-radius: 25px;
         padding: 20px;
         background-image: url(https://i.imgur.com/cOwrd6Y.jpg);
         background-size: cover;
         resize: no;
         background-repeat: no-repeat;
         background-position: center;">
   <span style="font-size: 23px;
                text-align: center;
                font-weight: bold;
                color: rgb(255,255,0);
                text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;">Top-10:</span>
</p>

<ol>
   <li>
       <span style="font-size: 21px;
                    font-weight: bold;
                    color: rgb(255,255,255);
                    text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;">test</span>
   </li>
</ol>

 

[obsidiannovels]

Never EVER use the <font> tag. It's deprecated. Last time I saw it used was last century, the mid 90s. In this case use the span tag instead. And you cannot nest a list inside a font tag. Lists cannot be nested in a paragraph block level tag either.

Your code does not validate at all, and is riddled with nesting errors. The li tag is missing a tail. Here is a cleaned up version. You should get rid of all the local styling as well, and instead place your css in a stylesheet.

<p style="text-align: center;
          background-color: #404040;
         border: 2px solid;
         color: red;
         width: 650px;
         border-radius: 25px;
         padding: 20px;
         background-image: url(https://i.imgur.com/cOwrd6Y.jpg);
         background-size: cover;
         resize: no;
         background-repeat: no-repeat;
         background-position: center;">
   <span style="font-size: 23px;
                text-align: center;
                font-weight: bold;
                color: rgb(255,255,0);
                text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;">Top-10:</span>
</p>

<ol>
   <li>
       <span style="font-size: 21px;
                    font-weight: bold;
                    color: rgb(255,255,255);
                    text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;">test</span>
   </li>
</ol>

Yes, I know those commands are old & that I should use css instead, but in this particular case I was limited to only a very few commands, as the site in question has blocked most HTML & CSS commands for security reasons. I can't even use tables, so you can tell it's bad...