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

How to achieve horizontal, vertical centering and both-end alignment code sharing in css

黄舟

Release： 2017-07-19 16:06:10

Original

1982 people have browsed it

Single line vertical centering

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

<p  style="width:100px;height:100px;line-height:100px;">
<span>hello world</span>
</p>

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

<p style="position:relative;width:400px;height:200px;">
<p class="element" style="width:50%;height:50%;line-height:100px;">
<span>hello world</span>
</p>
</p>
.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;

<p class="twoClass" >你好时间你好时间你好时间你好时间</p>
.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

<p style="position:relative;width:200px;height:200px;">
<p class="element" style="width:50%;height:50%;text-align:center;line-height:100px;">你好时间</p></p>
.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

<p style="position:relative;width:100px;height:400px;text-align:justify;">
hello world he hello world你好世界你好世界你好世界， he hello world he hello你好世界你好世界你好世界， world he hello world he hello world he 
</p>

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

<p style="width:400px;text-align-last:justify;">
我好帅
</p>

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;


}

<p>模块内的元素之间为换行符</p>
<br />
<p class="demo">
   <a class="link" href="#none">10元</a>
   <a class="link" href="#none">20元</a>
   <a class="link" href="#none">30元</a>
   <a class="link" href="#none">50元</a>
</p>
<br />
<p>模块内的元素之间为空格符</p>
<br />
<p class="demo">
<a class="link" href="#none">10元</a> <a class="link" href="#none">20元</a> <a class="link" href="#none">30元</a> <a class="link" href="#none">50元</a>
</p>
<br />
<p>模块内的元素之间为无分隔符，justify不起作用</p>
<br />
<p class="demo"><a class="link" href="#none">选项1</a><a class="link" href="#none">选项2</a><a class="link" href="#none">选项3</a><a class="link" href="#none">选项4</a></p>

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!