How to achieve horizontal, vertical centering and both-end alignment code sharing in css-CSS Tutorial-php.cn

Single line vertical centering

Single line vertical centering can be done directly with line-height=width

hello world

Copy after login

In this way, the text hello world is vertically centered. If you want the entire p to be at the parent level If the elements are all centered, then a layer of p is nested outside, and the margin of the p inside is used to achieve

 
 hello world 
 
 .element { position: absolute; left: 0; top: 0; right: 0; bottom: 0; margin: auto 0;}

Copy after login

Multiple lines of vertical centering

If there are multiple lines of vertical centering, line-height will not work. . You need to add display:table-cell of p and then vertical-align:middle;

你好时间你好时间你好时间你好时间
 .twoClass{display:table-cell; width:200px; height:200px; vertical-align:middle;}

Copy after login

In fact, this method is also feasible for vertical centering of a single row.

Horizontal centering

For horizontal centering of text, just text-align:center; is enough. If you want to center a p, you need to set the margin-left margin-right of p For the auto

 
你好时间
 .element { position: absolute; left: 0; top: 0; right: 0; bottom: 0; margin: auto auto;}

Copy after login

demo, the horizontal and vertical centering of p and text is implemented.

Align both ends

For the alignment of both ends of multi-line text, you only need text-align:justify

hello world he hello world你好世界你好世界你好世界， he hello world he hello你好世界你好世界你好世界， world he hello world he hello world he

Copy after login

It is worth noting that the multi-line text The last row is not justified.

If you want to operate on the last line, you can use text-align-last: justify; but there are compatibility issues.

Alignment of both ends of a single line

我好帅

Copy after login

Unexpectedly, a text-align-last: justify; can be achieved (chrome), but it has no effect under the IE browser. . .

The following are some a tags I found online and aligned at both ends

.demo{ text-align-last:justify; line-height:0; height:44px; } .demo a{ width:20%; display:inline-block; height:44px; line-height:44px; text-align:center; } 模块内的元素之间为换行符
 
  10元 20元 30元 50元 
 
 模块内的元素之间为空格符
 
  10元 20元 30元 50元 
 
 模块内的元素之间为无分隔符，justify不起作用
 
 选项1选项2选项3选项4

Copy after login

The above is the detailed content of How to achieve horizontal, vertical centering and both-end alignment code sharing in css. For more information, please follow other related articles on the PHP Chinese website!