How To Center Align Your Site

Table of contents:

How To Center Align Your Site
How To Center Align Your Site

Video: How To Center Align Your Site

Video: How To Center Align Your Site
Video: Center align navigation menus with HTML and CSS : For Beginner 2024, May
Anonim

When making a layout, a webmaster has to make a lot of effort to make the site look equally good at different screen resolutions. The best solution is to center all content on the page.

How to center align your site
How to center align your site

Instructions

Step 1

Center alignment method depends on the layout method. You can use tags or

… Of course, it is easier to wrap all the content in a tag, but it is outdated a long time ago, and there is no guarantee that everything will work correctly. The most modern way is using CSS technology.

Step 2

The tag separates a part of the code into one block, allowing you to change the appearance of the content, giving the fragment one font, color, background, etc. With block layout, all the contents of the tag are placed in the tag. In we set the alignment with the align attribute. It will look like this:

Site content

Step 3

Centering can also be set using CSS tools. To do this, you need to create a separate file of stylesheets or place everything in the same HTML file, in the tag. The code will look like this:

* {margin: 0; padding: 0;}

body {

text-align: center;

}

div {

width: 700px;

margin: 0 auto;

}

Step 4

In table layout, centering is set using tables in the tag

… The code will be like this: <site table

… The table will be positioned in the center of the page, so will its contents. You can also set the width of any block by specifying it using the width parameter.

Step 5

When choosing a page width, keep in mind that users' screen resolutions can be very different from yours. Sometimes, in order not to be mistaken with the size, you should set everything as a percentage. This is especially useful if you have a simple site.

Step 6

Whichever method you use, make sure that your site works correctly in all browsers. If for some reason it is incorrectly displayed in one of them - indicate this.

Recommended: