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

4 weeks 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?

7579

15

CakePHP Tutorial

1386

52

What is the format of the account name of steam

87

11

win11 activation key permanent

63

19

nyt connections hints and answers

28

111

Show More