CSS로 단락의 세로 정렬을 설정하는 방법(코드 첨부)-CSS 튜토리얼-php.cn

CSS로 단락의 세로 정렬을 설정하는 방법(코드 첨부)

yulia

풀어 주다： 2018-09-26 15:58:11

원래의

3120명이 탐색했습니다.

웹서핑을 하다 보면 세로로 정렬되어 있는 문단을 자주 보게 되는데, 오늘은 CSS를 사용하여 문단의 세로 정렬을 설정하는 방법을 알려드리니 도움이 필요한 분들에게 도움이 되었으면 좋겠습니다. 너.

CSS에서는 수직 정렬 속성을 통해 단락의 수직 정렬을 설정할 수 있습니다.

텍스트 자체의 경우 이 속성은

및

태그와 같은 블록 수준 요소에는 작동하지 않지만 테이블의 경우 이 속성은 매우 중요합니다.

<span style="font-size:24px;"><html>
<head>
<title>
垂直对齐
</title>
<style>
<!--
td.top{vertical-align:top;}
td.bottom{vertical-align:bottom;}
td.middle{vertical-align:middle;}
-->
</style>
</head>

<body>
<table cellpadding="2" cellspacing="0" border="1">
<tr>
<td><img src="http://scs.ganjistatic1.com/gjfs12/M09/A3/B3/CgEHC1VGJz2HZm6eAAEe8iEJ1Go460_600-0_6-0.jpg" border="0"></td>
<td class="top">垂直对齐方式，top</td>
</tr>
<tr>
<td><img src="http://scs.ganjistatic1.com/gjfs12/M09/A3/B3/CgEHC1VGJz2HZm6eAAEe8iEJ1Go460_600-0_6-0.jpg" border="0"></td>
<td class="bottom">垂直对齐方式，bottom</td>
</tr>
<tr>
<td><img src="http://scs.ganjistatic1.com/gjfs12/M09/A3/B3/CgEHC1VGJz2HZm6eAAEe8iEJ1Go460_600-0_6-0.jpg" border="0"></td>
<td class="middle">垂直对齐方式，middle</td>
</tr>
</body>
</html>
</span>

로그인 후 복사

위 코드는 3행 2열의 테이블을 생성합니다. 왼쪽 열은 그림으로 가득 차 있어 셀 높이가 늘어나고 비교용으로도 사용됩니다.

오른쪽 텍스트 열은 각각 상단 정렬, 하단 정렬, 중간 정렬을 채택합니다. 해당 CSS 값은 상단, 하단 및 중간입니다.

vertical-align 속성에 특정 값을 설정하면 텍스트 자체가 세로 방향으로 이동될 수 있습니다.

<span style="font-size:24px;"><html>
<head>
<title>
垂直对齐
</title>
<style>
<!--
span.zs{vertical-align:10px;}
span.fs{vertical-align:-10px;}
-->
</style>
</head>

<body>
<p>给对齐属性设置具体<span class="zs">数值</span>，正数</p>
<p>给对齐属性设置<span class="fs">具体</span>数值，负数</p>
</body>
</html>
</span>

로그인 후 복사

위 코드에서 보듯이 속성 값이 양수이면 해당 값만큼 텍스트가 위로 이동하고, 음수로 설정되면 아래로 이동합니다.

이 외에도 수직 속성에는 다른 값도 많이 있지만 주로 이미지에 적용됩니다.

위 내용은 CSS로 단락의 세로 정렬을 설정하는 방법(코드 첨부)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!