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

奋力向前

Release： 2021-08-12 00:13:28

Original

101689 people have browsed it

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.

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

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

Commonly used block elements: <div> <p> </p> <h1>.....<h6> <ol> </ol> <ul> <dl> <table> <address> </address> <form> <p>Commonly used inline elements: <code><a> <span> <br> <i> <em> <strong> <label> <q> <cite> <code> <var></var>

Commonly used inline block elements:<img alt="How to achieve centering effect in html web pages (code sharing)" > <input>

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`

<p align="center">关关和鸣的雎鸠，栖息在河中的小洲</p>

Copy after login

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

<p align="center">img……</p>

Copy after login

How to center the input input box

  style="max-width:90%"

Copy after login

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

<div align="center">
<input value="帐号"size="20">
</div>

Copy after login

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

Copy after login

Code rendering

How to achieve centering effect in html web pages (code sharing) 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!