What are the attribute values ​​of the display attribute in HTML? How does the display attribute achieve horizontal and vertical centering?

What are the attribute values ​​of the display attribute in HTML? What's the meaning? And how does the display attribute in HTML achieve horizontal and vertical centering? Today's article will introduce to you the value of the display attribute in HTML, and how to achieve horizontal and vertical centering of the value of the display attribute in HTML. Two methods are introduced.

displayHere I talk about the four most commonly used attribute values ​​​​inline, block, inlin-block, and none.

First let’s talk about inline (n inline element):

The value of this attribute is the default value. This element will be displayed as an inline element with no line breaks before or after the element. This attribute value is generally not set. From my personal understanding, it is no different from normal inline elements. Block and inline-block are more commonly used.

Then there is the attribute value of block (block-level element):

This attribute value is more interesting. It is set so that the block-level element occupies an exclusive line, as far as line breaks are concerned. The effect is the same as that of the p tag, but after this attribute value is set, as a block-level element, it has width, height, and the distance between it and other block-level elements. The margin attribute setting, and the spacing setting padding, but cannot Set line-height.

There is also the attribute value of inline-block (inline block):

This attribute value is relatively powerful. I basically saw it when I first started learning. This attribute value will be set as long as it is not line-wrapped. On the one hand, it can be used as a block-level element and can have the characteristics of a block. On the other hand, since I am a beginner, it is troublesome to set the center. All using this attribute value can Set the line height so the text is centered for ease of use.

These attributes are very useful for the implementation of this navigation bar. The two attribute values ​​​​of block and inline-block are mainly used. Inline-block is used as the implementation of several elements in the same row, and block is used as Implementation of line breaks between elements. Everyone can try it.

For the last none attribute value:

I personally think it is more convenient to hide elements. When the mouse is floating, change the display attribute value to achieve display. Effect with hidden elements.

What are the commonly used values ​​of display in HTML? Let us take a look at

Display in HTML is relatively easy to use in normal project development. The main values ​​are:

• none (the element will not be displayed);

• block (the element will be displayed as a block-level element, and there will be With line breaks);

• inline (the element will be displayed as an inline element, with no line breaks before and after the element);

• inline- block (inline block element. New value in CSS2.1);

• table (the element will be displayed as a block-level table, similar to

  , with line breaks before and after the table) );

  table-row (the element will be displayed as a table row, similar to

  );

  table-cell (the element will be displayed as a table cell, similar to

  and

  ). display achieves horizontal and vertical centering! Use position and margin to center the element horizontally and vertically; I believe everyone is familiar with it and uses it frequently. But I wonder if you have ever used display: table and table-cell to center elements horizontally and vertically? The following are two methods of using display:table-cell to horizontally and vertically center elements: 1. Use display:table and table-cell to horizontally and vertically center elements. Structure: <div class="wrap"> <div class="box"> <div class="con">梦幻雪冰</div> </div> </div> Style: .wrap { /*让元素以表格形式渲染*/ display: table; height: 400px; width: 400px; background: #fcf; } .box { /*让元素以表格的单元素格形式渲染*/ display: table-cell; /*使用元素的垂直对齐*/ vertical-align: middle; } .con { width: 200px; height: 200px; margin: 0 auto; background: #999; } Advantages: This method will not have the same height as the previous two methods. This method can dynamically change the height according to the content of the element, so there is no space limit. The content of the element will not be cut off or ugly scroll bars will appear due to insufficient space. Disadvantages: What are the shortcomings? This method is only suitable for modern browsers and will not work properly under IE6-7. 2. Use display: table-cell to center the elements horizontally and vertically Structure: <div class="wrap"> <div class="box"> 梦幻雪冰 </div> </div> Style: .wrap { display: table-cell; width: 400px; height: 400px; background: #fcf; vertical-align: middle; } .box { width: 200px; height: 200px; margin: 0 auto; background: #999; } Advantages : The advantages of this method are the same as method three, and there will be no height restrictions. Disadvantages: IE6 and IE7 are not supported [Related recommendations] What is web in HTML5? What are the elements in web storage? What are the attributes of the HTML IMG tag? Understand the usage of IMG tag The above is the detailed content of What are the attribute values ​​of the display attribute in HTML? How does the display attribute achieve horizontal and vertical centering?. For more information, please follow other related articles on the PHP Chinese website! 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 Hot AI Tools Undresser.AI Undress AI-powered app for creating realistic nude photos AI Clothes Remover Online AI tool for removing clothes from photos. Undress AI Tool Undress images for free Clothoff.io AI clothes remover Video Face Swap Swap faces in any video effortlessly with our completely free AI face swap tool! Show More Hot Article Assassin's Creed Shadows: Seashell Riddle Solution 3 weeks ago By DDD What's New in Windows 11 KB5054979 & How to Fix Update Issues 2 weeks ago By DDD Where to find the Crane Control Keycard in Atomfall 3 weeks ago By DDD Assassin's Creed Shadows - How To Find The Blacksmith And Unlock Weapon And Armour Customisation 1 months ago By DDD Roblox: Dead Rails - How To Complete Every Challenge 3 weeks ago By DDD Show More Hot Tools Notepad++7.3.1 Easy-to-use and free code editor SublimeText3 Chinese version Chinese version, very easy to use Zend Studio 13.0.1 Powerful PHP integrated development environment Dreamweaver CS6 Visual web development tools SublimeText3 Mac version God-level code editing software (SublimeText3) Show More Hot Topics Where is the login entrance for gmail email? 7627 15 CakePHP Tutorial 1389 52 What is the format of the account name of steam 89 11 win11 activation key permanent 70 19 nyt connections hints and answers 31 140 Show More Related knowledge Is HTML easy to learn for beginners? Apr 07, 2025 am 12:11 AM HTML is suitable for beginners because it is simple and easy to learn and can quickly see results. 1) The learning curve of HTML is smooth and easy to get started. 2) Just master the basic tags to start creating web pages. 3) High flexibility and can be used in combination with CSS and JavaScript. 4) Rich learning resources and modern tools support the learning process. The Roles of HTML, CSS, and JavaScript: Core Responsibilities Apr 08, 2025 pm 07:05 PM HTML defines the web structure, CSS is responsible for style and layout, and JavaScript gives dynamic interaction. The three perform their duties in web development and jointly build a colorful website. What is an example of a starting tag in HTML? Apr 06, 2025 am 12:04 AM AnexampleofastartingtaginHTMLis,whichbeginsaparagraph.StartingtagsareessentialinHTMLastheyinitiateelements,definetheirtypes,andarecrucialforstructuringwebpagesandconstructingtheDOM. Understanding HTML, CSS, and JavaScript: A Beginner's Guide Apr 12, 2025 am 12:02 AM WebdevelopmentreliesonHTML,CSS,andJavaScript:1)HTMLstructurescontent,2)CSSstylesit,and3)JavaScriptaddsinteractivity,formingthebasisofmodernwebexperiences. Gitee Pages static website deployment failed: How to troubleshoot and resolve single file 404 errors? Apr 04, 2025 pm 11:54 PM GiteePages static website deployment failed: 404 error troubleshooting and resolution when using Gitee... How to implement adaptive layout of Y-axis position in web annotation? Apr 04, 2025 pm 11:30 PM The Y-axis position adaptive algorithm for web annotation function This article will explore how to implement annotation functions similar to Word documents, especially how to deal with the interval between annotations... How to use CSS3 and JavaScript to achieve the effect of scattering and enlarging the surrounding pictures after clicking? Apr 05, 2025 am 06:15 AM To achieve the effect of scattering and enlarging the surrounding images after clicking on the image, many web designs need to achieve an interactive effect: click on a certain image to make the surrounding... Why do you need to call Vue.use(VueRouter) in the index.js file under the router folder? Apr 05, 2025 pm 01:03 PM The necessity of registering VueRouter in the index.js file under the router folder When developing Vue applications, you often encounter problems with routing configuration. Special... See all articles Public welfare online PHP training，Help PHP learners grow quickly！ About us Disclaimer Sitemap © php.cn All rights reserved