CSS에서 수평, 수직 센터링 및 양쪽 끝 정렬 코드 공유를 달성하는 방법

한 줄 수직 센터링

한 줄 수직 센터링은 line-height=width

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

를 사용하여 직접 수행할 수 있습니다. 이런 식으로 텍스트 hello world가 수직으로 중앙에 정렬됩니다. 전체 p가 상위 요소의 중앙에 오도록 하려면, p의 한 레이어 외부에 중첩하고 내부의 p의 여백을 통해 구현합니다.

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

세로 센터링의 여러 줄

세로 센터링의 여러 줄이 있는 경우 line-height가 작동하지 않습니다. p의 display:table-cell을 추가한 다음 Vertical-align:middle;

<p class="twoClass" >你好时间你好时间你好时间你好时间</p>
.twoClass{display:table-cell; width:200px; height:200px; vertical-align:middle;}

사실 이 방법은 단일 행의 수직 중앙 정렬에도 가능합니다.

가로 중심 맞추기

텍스트를 가로로 가운데로 맞추려면 text-align:center만으로 충분합니다. 양수 p를 가운데에 맞추려면 p의 margin-left 및 margin-right를 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;}

로 설정해야 합니다. 이 데모 구현에서는 p와 텍스트가 가로 및 세로 중앙에 배치됩니다.

Alignment

여러 줄 텍스트를 정렬하려면 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>

만 있으면 됩니다. 이 여러 줄 텍스트의 마지막 줄은 정렬되지 않는다는 점에 주목할 가치가 있습니다.

마지막 줄에서 작업하려면 text-align-last: justify를 사용할 수 있지만 호환성 문제가 있습니다.

한 줄의 양쪽 끝 정렬

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

예기치 않게 text-align-last: justify가 가능하지만(chrome) IE 브라우저에서는 효과가 없습니다. . .

다음은 인터넷에서 찾은 태그 중 양쪽 끝이 정렬된 태그입니다

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

위 내용은 CSS에서 수평, 수직 센터링 및 양쪽 끝 정렬 코드 공유를 달성하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!