CSS로 단락의 세로 정렬을 설정하는 방법(코드 첨부)
- yulia원래의
- 2018-09-26 15:58:113067검색
웹서핑을 하다 보면 세로로 정렬되어 있는 문단을 자주 보게 되는데, 오늘은 CSS를 사용하여 문단의 세로 정렬을 설정하는 방법을 알려드리니 도움이 필요한 분들에게 도움이 되었으면 좋겠습니다. 너.
CSS에서는 수직 정렬 속성을 통해 단락의 수직 정렬을 설정할 수 있습니다.
텍스트 자체의 경우 이 속성은 e388a4556c0f65e1904146cc1a846bee 및 dc6dce4a544fdca2df29d5ac0ea9906b 태그와 같은 블록 수준 요소에는 작동하지 않지만 테이블의 경우 이 속성은 매우 중요합니다.
<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 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.