css horizontal centering summary_html/css_WEB-ITnose

Foreword

After reading many posts, I found that there is no centered layout that can be directly used by novices. So here is a summary, which can be regarded as my little accumulation of centered layout, and it is also convenient for beginners to use immediately.

1. Element classification

1. Inline elements

Inline elements, that is, inline elements, can display multiple elements in one line. Note: The height, width, and top and bottom margins of an element cannot be set. The height and width of an element are the height and width of the text or image it contains.

Inline elements include these:

, ,
, , , , , , ,

Of course, sometimes it can be turned into a block-level element through the following code:

display: block;

2. Block-level elements

Block-level elements occupy one row, and other elements must be placed in separate rows. Note: The height, width, and top and bottom margins of the element can be set. If the width of the element is not set, it is 100% of its parent container.

Block-level elements include these:

,

,

...

,

,
,

, < ;table>,

,

,

Similarly, you can also change block-level elements into inline elements through the following code:

display: inline ;

3. Introduction to inline block elements

Inline block elements, similar to inline elements, can be displayed on one line. Note: The height, width, line height, and top and bottom margins of the element can all be set.

Inline block elements include these: ,

display: inline-block;

2. Centering Method

a. Use the left and right margin adaptive method: margin: 0 auto; /*Using this method needs to become an inline block element* and requires a fixed width*/

b. Also use the left and right margin methods:

width: 500px;
height: 30px;
position:relative;
margin-left: 50%;
left: -250px; /*250px is the width of the element divided by 2, and needs to be positioned*/

c. The parent element sets text-align: center; /*Use This method needs to be changed into an inline element */

d. For elements with uncertain width, you can put a table tag on the outer layer, and then use margin: 0 auto; to center the table :

table{

　margin: 0 auto;

}

HTML code:

< table>

                                                         class="center">

I want to center it horizontally!

e. For elements with uncertain width, position it and the parent element, set left: -50% and left: 50% respectively, and then achieve horizontal Center:

.father{

position: relative;

left:50%;

width: 960px;

height: 300px;

background: yellow; }

.children{

Height: 30px;

Background:#ccc;

Position: relative;

left:-50%; ：

🎜>















Statement：

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

Previous article：toolTip (use svg to create dynamic dialog boxes)_html/css_WEB-ITnoseNext article：toolTip (use svg to create dynamic dialog boxes)_html/css_WEB-ITnose

Related articles

See more

• Summary of Html knowledge
• How to learn HTML quickly
• The difference between html xhtml xml
• The difference between src and href attributes
• About HTML5 and CSS replacement use