How to achieve centering effect in html web pages (code sharing)

In the previous article "It is worth knowing the basic structure of html web pages during study (summary)", I introduced you to a basic structure of html that is very clear. With this, I guarantee that you will not incoherent. The next article below will share with you how to achieve the centering effect in HTML web pages. Friends in need can refer to it.

html Centered elements can be classified as [inline] - [block] - [inline block]

Commonly used block elements:

.....

Commonly used inline elements:


Commonly used inline block elements:

Block-level element specification: Using text-align: center is invalid.

If you need to set the center, set the margin value on the left and right sides to "auto".

So the remaining areas of the elements on the left and right sides are equally divided, that is, the areas on both sides of the element each account for 50%, then the element is centered on the left and right.

Block-level elements with variable width

There are usually three ways to achieve centering

1. Through the table element Implementation;

2. Set display: inline method to set the display type to inline elements;

3. Set position:relativeUse relative Positioning method, offset the element 50% to the left to achieve centering.

##

Tag to center the title

关关和鸣的雎鸠，栖息在河中的小洲

Code effect




How to center the img image

Generally speaking, you can use "

text-align:center# in CSS ## attribute, margin:0 auto or positioning attribute" can be centered. img defines a parent tag, so that the content in this parent tag is centered, then img will naturally be centered

img……




How to center the input input box

style="text-align:center; "

Input is nested outside the div, and the method of setting the inner element of the div to be centered

code example of how to achieve the centering effect in the html webpage

 

 

 
 


                

                php搜一下
            







   图片链接







    图片链接







    图片链接







    图片链接







    图片链接




Code rendering

If you want to simply use html language, the choice is

If you are engaged in web design, it is recommended that you use css language to modify web pages.

Recommended learning:

Html video tutorial

The above is the detailed content of How to achieve centering effect in html web pages (code sharing). For more information, please follow other related articles on the PHP Chinese website!