Jump to content
Please Use CODE Tags

Text align

Zuccers
By Zuccers
in Programming
 Share
Posted

Hello people, so i'm working on a "web design" and i have text, when i try to center it with 

<p><center>Hello</center></p>

and then add 

p {
  text-align: center;

}

But it would not center :(

Src code: 

<html>

<head>

<body>

<center><b><i>Hello</i></b></center>

<style>

p {
  text-align: center;
  font-family: verdana;
  font-size: 20px;

</style>

</body>

</head>

</html>

excuse my sh!t coding :D, thanks in advance.

Link to comment
Share on other sites
Link to post
Share on other sites
Posted

By default, tags will only be as big as they need to be. In this case since you didn't specify a size, the <p> tag will only be as big as the text it contains. If you want the text centered, you need to define a width.

 

However preferably the <p> tag should be within a <div> tag. Then you apply how big you want the <div> tag to be.

 

Conventionally, the <body> tag should come after the <head> tag, not within it.

I have a blog! And a list of guides I've posted

Link to comment
Share on other sites
Link to post
Share on other sites
Posted

center tag is no longer supported. try not to use it.

In the style sheet you have to close the curly bracket, you left it open so the styling won't work.

Put the stylesheet inside the head tag.

Ryzen 5700g @ 4.4ghz all cores | Asrock B550M Steel Legend | 3060 | 2x 16gb Micron E 2666 @ 4200mhz cl16 | 500gb WD SN750 | 12 TB HDD | Deepcool Gammax 400 w/ 2 delta 4000rpm push pull | Antec Neo Eco Zen 500w

Link to comment
Share on other sites
Link to post
Share on other sites
Posted

The structure is messy.

it should be : 

<html>
<head>
</head>
// head on top of the body tag
<body>
</body>
</html>

Head tag on top of the body tag, enclosed inside the html tag.
 

Ryzen 5700g @ 4.4ghz all cores | Asrock B550M Steel Legend | 3060 | 2x 16gb Micron E 2666 @ 4200mhz cl16 | 500gb WD SN750 | 12 TB HDD | Deepcool Gammax 400 w/ 2 delta 4000rpm push pull | Antec Neo Eco Zen 500w

Link to comment
Share on other sites
Link to post
Share on other sites
Posted
  • Author
2 minutes ago, SupaKomputa said:

center tag is no longer supported. try not to use it.

In the style sheet you have to close the curly bracket, you left it open so the styling won't work.

Put the stylesheet inside the head tag.

The center tag actually does work, but it only centers the text to the "top center", but not the "true middle".

Link to comment
Share on other sites
Link to post
Share on other sites
Posted
  • Author
1 minute ago, SupaKomputa said:

The structure is messy.

it should be : 


<html>
<head>
</head>
// head on top of the body tag
<body>
</body>
</html>

Head tag on top of the body tag, enclosed inside the html tag.
 

Yes i fixed that. thanks

 

Link to comment
Share on other sites
Link to post
Share on other sites
Posted
7 minutes ago, Zuccers said:

The center tag actually does work, but it only centers the text to the "top center", but not the "true middle".

center tag is no longer supported in HTML5, and not a best practice to use it.

In HTML5 the correct way to customize the looks is by CSS.

There's no such thing as "true middle".

Text-align:center will only center your text paragraph horizontally, regardless the height of the box.

Vertical align (valign) can only be used in Tables.

Ryzen 5700g @ 4.4ghz all cores | Asrock B550M Steel Legend | 3060 | 2x 16gb Micron E 2666 @ 4200mhz cl16 | 500gb WD SN750 | 12 TB HDD | Deepcool Gammax 400 w/ 2 delta 4000rpm push pull | Antec Neo Eco Zen 500w

Link to comment
Share on other sites
Link to post
Share on other sites
Posted
  • Author
1 minute ago, SupaKomputa said:

center tag is no longer supported in HTML5, and not a best practice to use it.

In HTML5 the correct way to customize the looks is by CSS.

There's no such thing as "true middle".

Text-align:center will only center your text paragraph horizontally, regardless the height of the box.

Vertical align (valign) can only be used in Tables.

So what do i do if i want to "center" that "Hello" ?

Link to comment
Share on other sites
Link to post
Share on other sites
Posted

There's no direct way to center vertically, no tags / css supports it.

There are some way to do it anyway. Below are the basic one.

First you need to make the html and body tag height the same as the viewport / browser size.

in stylesheet : 

html, body {width: 100%; height: 100%}

and the easiest way is to add table tag with width and height 100% plus valign=center; 

<table style="width: 100%; height:100%;">
  <tr>
    <td valign="center" style="text-align:center">
      Your text here
    </td>
  </tr>
</table>

 

Ryzen 5700g @ 4.4ghz all cores | Asrock B550M Steel Legend | 3060 | 2x 16gb Micron E 2666 @ 4200mhz cl16 | 500gb WD SN750 | 12 TB HDD | Deepcool Gammax 400 w/ 2 delta 4000rpm push pull | Antec Neo Eco Zen 500w

Link to comment
Share on other sites
Link to post
Share on other sites
Posted
24 minutes ago, Zuccers said:

So what do i do if i want to "center" that "Hello" ?

I'll give you a freebie:

  

<html>
    <head>
        <style>
            body { width: 100%;}
            div {width: 100%;}
            p {text-align: center;}
        </style>
    </head>
    <body>
        <div>
            <p>
                Hello!
            </p>
        </div>
    </body>
</html>

For brevity though, you can also do: 

<html>
    <head>
        <style>
            body { width: 100%;}
            p {text-align: center;}
        </style>
    </head>
    <body>
        <p>
            Hello!
        </p>
    </body>
</html>

(though my statement about the p tag taking up as much space as needed is incorrect. It appears p tags by default will use 100% width of its container, in this case, <body>)

 

If you need centered vertical alignment though, there are several "hacks" to do it, some of which can be found at https://www.w3schools.com/css/css_align.asp

I have a blog! And a list of guides I've posted

Link to comment
Share on other sites
Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing Programming

×