.....

Commonly used inline elements:


Commonly used inline block elements:

Block-level element specification: Usingtext-align: centeris 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 thetableelement Implementation;

2. Setdisplay: inlinemethod to set the display type to inline elements;

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

##

Tag to center the title

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

Copy after login

Code effect




How to center the img image

Generally speaking, you can use "

text-align:center# in CSS ## attribute,margin:0 autoor 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……

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

Copy after login

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

         
         

          

           
          
         
         

          

           
          
         
         

          

         
         

          

           

            
           
           php搜一下
          
          

           

            
            图片链接
           
           

            
            图片链接
           
           

            
            图片链接
           
           

            
            图片链接
           
           

            
            图片链接
           
          
         

Copy after login




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!

Related labels：

html

source：php.cn

Previous article：It is worth understanding the basic structure of html web pages while studying (summary) Next article：HTML5 article: 5 ways to achieve page jump (code sharing)

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Latest Articles by Author

• How to remove html input border
  2021-10-08 11:14:48
• How to set the html input size
  2021-10-08 10:17:36
• How to set opacity in html
  2021-10-06 20:00:26
• How to set the length of html text box
  2021-10-06 19:58:49
• What are the js data types?
  2021-09-30 15:13:04
• What does transcoding mean?
  2023-02-16 14:08:37
• What are the new features of harmonyos 2.0?
  2023-02-16 14:09:06
• What is the relationship between Ubuntu and Linux?
  2023-02-16 14:09:34
• What does booting windows mean?
  2023-02-16 14:10:18
• What does temp mean in computer?
  2023-02-16 14:10:40

Latest Issues

Leverage VueJS components in PHP I want to mix basic HTML generated by Php and VueJS components without having to use VueJS...

From 2023-11-11 00:01:44

0

2

288

How to use open primitive tag in next js 13? In the recent NextJS13 update, they introduced a new way of handling meta tags that differ...

From 2023-11-10 23:03:51

0

1

527

PHP mailer not working: no error log, message says sent but not received I don't receive any error logs in my webserver's php error log. I've tried several differe...

From 2023-11-10 15:02:39

0

1

218

v-date-picker to select only month and year Please tell me if there is any other way to do this using v-date-picker. I just want the u...

From 2023-11-10 14:05:05

0

1

269

The rewritten title is: SweetAlert2: "onBeforeOpen" parameters are unknown I'm using Laravel5.8 and Sweetalertv2 and I'm trying to trigger this alert on Blade with: ...

From 2023-11-10 09:39:01

0

1

257

Related Topics

More>

• html copyright symbol
• html online editor
• html web page production
• html space
• what is html
• How to set html font size
• html to txt
• How to write html text box code

Popular Recommendations

• What does url mean?
• What does DOM mean?
• How to change image size
• How to make font bold in HTML
• How to set the size of html images

Popular Tutorials

More>

Related Tutorials

Popular Recommendations

Latest courses

• 
  HTML code example

  137919
• 
  HTML/CSS technical knowledge shared daily

  91196
• 
  HTML5 development practice: front-end production of Baidu takeout mobile website

  59557

• 
  The latest ThinkPHP 5.1 world premiere video tutorial (60 days to become a PHP expert online training course)

  1396965 times of learning
• 
  JAVA Beginner's Video Tutorial

  2367403 times of learning
• 
  Little Turtle's zero-based introduction to learning Python video tutorial

  494342 times of learning
• 
  Quick introduction to web front-end development

  213660 times of learning
• 
  Master PS video tutorials from scratch

  846696 times of learning

• 
  [Web front-end] Node.js quick start

  3505 times of learning
• 
  Complete collection of foreign web development full-stack courses

  2745 times of learning
• 
  Go language practical GraphQL

  2210 times of learning
• 
  550W fan master learns JavaScript from scratch step by step

  482 times of learning
• 
  Python master Mosh, a beginner with zero basic knowledge can get started in 6 hours

  12013 times of learning

Latest Downloads

More>

Web Effects

Website Source Code

Website Materials

Front End Template

• [form button] jQuery enterprise message form contact code
• [Player special effects] HTML5 MP3 music box playback effects
• [Menu navigation] HTML5 cool particle animation navigation menu special effects
• [form button] jQuery visual form drag and drop editing code
• [Player special effects] VUE.JS imitation Kugou music player code
• [html5 special effects] Classic html5 pushing box game
• [Picture special effects] jQuery scrolling to add or reduce image effects
• [Photo album effects] CSS3 personal album cover hover zoom effect

• [Front-end template] Home Decor Cleaning and Repair Service Company Website Template
• [Front-end template] Fresh color personal resume guide page template
• [Front-end template] Designer Creative Job Resume Web Template
• [Front-end template] Modern engineering construction company website template
• [Front-end template] Responsive HTML5 template for educational service institutions
• [Front-end template] Online e-book store mall website template
• [Front-end template] IT technology solves Internet company website template
• [Front-end template] Purple style foreign exchange trading service website template

• [PNG material] Cute summer elements vector material (EPS PNG)
• [PNG material] Four red 2023 graduation badges vector material (AI EPS PNG)
• [banner picture] Singing bird and cart filled with flowers design spring banner vector material (AI EPS)
• [PNG material] Golden graduation cap vector material (EPS PNG)
• [PNG material] Black and white style mountain icon vector material (EPS PNG)
• [PNG material] Superhero silhouette vector material (EPS PNG) with different color cloaks and different poses
• [banner picture] Flat style Arbor Day banner vector material (AI+EPS)
• [PNG material] Nine comic-style exploding chat bubbles vector material (EPS+PNG)

• [Front-end template] Home Decor Cleaning and Repair Service Company Website Template
• [Front-end template] Fresh color personal resume guide page template
• [Front-end template] Designer Creative Job Resume Web Template
• [Front-end template] Modern engineering construction company website template
• [Front-end template] Responsive HTML5 template for educational service institutions
• [Front-end template] Online e-book store mall website template
• [Front-end template] IT technology solves Internet company website template
• [Front-end template] Purple style foreign exchange trading service website template

About us Disclaimer Sitemap

php.cn：Public welfare online PHP training，Help PHP learners grow quickly！