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%; ：

🎜>

Related labels：

css水平居中总结

source：php.cn

Previous article：toolTip (use svg to create dynamic dialog boxes)_html/css_WEB-ITnose Next article：Html learning basic markup of html files (1)_html/css_WEB-ITnose

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

• What is a NullPointerException, and how do I fix it?
  2024-10-22 09:46:29
• From Novice to Coder: Your Journey Begins with C Fundamentals
  2024-10-13 13:53:41
• Unlocking Web Development with PHP: A Beginner's Guide
  2024-10-12 12:15:51
• Demystifying C: A Clear and Simple Path for New Programmers
  2024-10-11 22:47:31
• Unlock Your Coding Potential: C Programming for Absolute Beginners
  2024-10-11 19:36:51
• Unleash Your Inner Programmer: C for Absolute Beginners
  2024-10-11 15:50:41
• Automate Your Life with C: Scripts and Tools for Beginners
  2024-10-11 15:07:41
• PHP Made Easy: Your First Steps in Web Development
  2024-10-11 14:21:21
• Build Anything with Python: A Beginner's Guide to Unleashing Your Creativity
  2024-10-11 12:59:11
• The Key to Coding: Unlocking the Power of Python for Beginners
  2024-10-11 12:17:31

Latest Issues

How to make floated elements stack vertically instead of horizontally in CSS? I'm trying to make a webpage with two columns, with main content on one side and additiona...

From 2024-04-06 20:45:26

0

2

386

Vertically rotated table title, centered + bottom aligned, cross-browser I have a table with rotated headers that looks as expected in Chrome, but not in Firefox. ...

From 2024-04-04 16:45:25

0

1

330

Rewritten title: Center a fixed HTML square or circle element horizontally and vertically when resized How to center a square or circle fixed html element of varying sizes horizontally and vert...

From 2024-04-04 12:31:51

0

1

322

How can I make the bottom Flex column maintain item order using CSS? I have a horizontally centered column of flex items, sorted from 1 to 5, aligned from the ...

From 2024-03-30 11:59:06

0

2

291

Related Topics

More>

• proxy switchysharp
• What is the shortcut key for brush size?
• How to solve scripterror
• MySQL creates stored procedure
• How to make money with blockchain
• Detailed process of upgrading win7 system to win10 system
• The difference between windows hibernation and sleep
• Can program files be deleted?