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 f5d188ed2c074f8b944552db028f98a1, with line breaks before and after the table) );

• table-row (the element will be displayed as a table row, similar to a34de1251f0d9fe1e645927f19a896e8);

• table-cell (the element will be displayed as a table cell, similar to b6c5a531a458a2e790c1fd6421739d1c and b4d429308760b6c2d20d6300079ed38e).

• 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!