Detailed explanation of the simple method of centering CSS elements

This article mainly introduces a simple method to explain in detail the centered layout of CSS elements. The article introduces three situations of inline elements, block elements and inline blocks. Friends in need can refer to it

First we need to know What types of elements are there?

Inline elements (display:inline;) such as a, span, b, i [a non-customizable box]

[The default peers can continue to follow the same type of tags]
[ Content expansion width]
[Does not support width and height]
[Does not support upper and lower margins and padding]
[Code wrap will be parsed into empty space]

Block element (display:block ;) Such as p, p, h1-h6

[Display in one line by default]
[Basically supports all css commands]

Inline block (display:inline-block;) such as img [img is such a magical thing. It is neither inline nor block, but an inline block】

[Block is displayed in one line]
[Supports width and height]
[Content expands width when there is no width]

Then let’s center the above three elements in sequence

1. Single-line text of embedded elements

The most common solution is to use text-align and line-height

line-height:200px;   
text-align:center;

But is this solution necessarily perfect? I don’t think so (I guess someone complained about my obsessive-compulsive disorder)
Anyway, every time I select text, I feel very unhappy when I see non-text areas are also selected, but IE6-8 only selects text

2. Center the block element

Solution: Use positioning element + negative margin value

width:100px;   
height:100px;   
position:relative;   
left:100px;   
top:100px;   
margin-left:-50px;   
margin-top:-50px;

Disadvantage: Requires knowing the box The width and height

3. Center the inline block

(1) Convert the img into a background image, and then use background-position:center; However, it should be noted that because Picture links generally change frequently, so you need to do this:

<img  src="/static/imghw/default1.png"  data-src="img.png"  class="lazy"  style=”background-img:url(imgURL)” / alt="Detailed explanation of the simple method of centering CSS elements" >

Does it violate the principle of separation of content and style?

(2) Auxiliary tag

html code:

<p class="box">  
    <img  src="/static/imghw/default1.png"  data-src="img.png"  class="lazy"   / alt="Detailed explanation of the simple method of centering CSS elements" ><span></span>  
</p>

CSS code:

.box{width:200px;height:200px;border:1px solid #333;margin:0 auto;text-align:center;}   
.box img{vertical-align:middle;border:1px solid #999;padding:2px;}   
.box span{display:inline-block;height:100%;background:#333;vertical-align:middle;}

Effect ：

Nonsense: The img element and the auxiliary element span must be on one line, otherwise the horizontal centering will not be complete. When using inline-block, line breaks will be parsed into spaces. In fact, there are other methods on the Internet, such as the table method that has been popular for a long time. There are a lot of them online so I won’t show them here.

The above is the detailed content of Detailed explanation of the simple method of centering CSS elements. For more information, please follow other related articles on the PHP Chinese website!