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
| 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> Copy after login 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;
}Copy after login 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> Copy after login Style: .wrap {
display: table-cell;
width: 400px;
height: 400px;
background: #fcf;
vertical-align: middle;
}
.box {
width: 200px;
height: 200px;
margin: 0 auto;
background: #999;
}Copy after login 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!
Related labels：
source：php.cn
Previous article：Analysis of browser kernel and browser compatibility issues
Next article：What are the specific differences between the usage of XHTML and HTML, and how to distinguish them?
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
Latest Issues
How to customize VSCode id attribute?
I recently moved from Atom to VSCode, and while I've managed to customize most of the edit...
From 2024-03-31 14:13:45
0
1
373
Related Topics
More>
Popular Recommendations
Popular Tutorials
More>
Latest Downloads
More>
|
|---|
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
