HTML 스팬 태그를 가운데 정렬하고 오른쪽 정렬하는 방법은 무엇입니까? HTML 스팬 태그의 스타일 분석은 다음과 같습니다.

이 글에서는 주로 HTML에서 스팬 태그의 텍스트를 가운데 정렬하고 오른쪽 정렬하는 방법에 대해 설명합니다. 여기에도 다양한 예제가 있습니다.

#🎜🎜 #먼저 HTML의 SPAN 속성이 어떻게 중앙에 배치되어 있는지 살펴볼까요?

사실 범위 텍스트를 중앙에 배치하는 방법은 여러 가지가 있습니다. 더 쉬운 방법은 다음 코드 줄을 코드에 삽입하는 것입니다. #🎜🎜 ##🎜 🎜#style= "text-align:center; line-height:18px; "

Horizontal center text-align:center; 범위 높이와 같으면 텍스트를 세로로 가운데에 맞출 수 있습니다(텍스트 한 줄만).

가로 가운데 맞춤은 매우 간단합니다. text-align:center만 설정하면 됩니다. 하지만 세로 가운데 맞춤은 항상 수수께끼였습니다! 예전에는 항상 패딩탑 조정을 하려고 했는데 가끔 안될때도 있었고, 오늘도 마찬가지고, 높이 값이 크지 않은 경우에도 마찬가지입니다. 패딩 상단을 늘리면 DIV 또는 SPAN의 높이가 늘어납니다.

이론적으로 수직 정렬의 기본값은 상단 정렬이 아닌 기준선이어야 한다고 생각하고 있었는데 갑자기 글꼴에 line-height 속성이 있다는 사실이 기억나서 기본값은 다음과 같습니다. 한 문자만큼 높으므로 line-height 값을 DIV 또는 SPAN의 높이와 동일하게 변경하십시오!

이렇게 하면 DIV와 SPAN의 텍스트가 중앙에 세로로 정렬됩니다.

span 태그의 예를 살펴보겠습니다.

<style>
div {text-align:center;}
div dd,div dt {text-align:left;}
</style>
<div>
<dl>
<dd>111</dd>
<dt>11111111111111</dt>
<dd>222</dd>
<dt>222222222222222</dt>
</dl>
<span><a href="www.php.cn">水平居中</a></span>
</div>

이렇게 하면 범위 태그의 내용이 페이지 중앙의 효과는 다음과 같습니다. 그림:

다음으로 해결해야 할 문제는 오른쪽 정렬 방법입니다.

우리는 웹사이트를 만들 때 div, li,span에 종종 스팬 오른쪽 정렬을 추가합니다. 예를 들어 기사 목록에서 오른쪽 정렬을 늘리는 데 시간을 추가합니다. 웹 페이지의 아름다움, 다음 코드:

html은 다음과 같습니다:

<ul class="news">
    <li>span右对齐,换行显示的解决方法<span>2010-8-26</span></li>
</ul>

css: .news ul lispan{float:right;}#🎜🎜 #

하지만 문제가 있습니다. 블록에 범위를 추가하면 웹 페이지에서 미리 볼 때 범위가 오른쪽 정렬되는 경우가 종종 있습니다. 그렇다면 왜 그럴까요?

비 부동 요소와 부동 요소가 함께 있을 때 비 부동 요소가 앞에 있으면 부동 요소가 분리됩니다. 따라서 스팬이 부동 소수점인 경우에도 마찬가지입니다. , 그러나 텍스트 표시는 float:none이므로 범위는 제외됩니다.

줄 바꿈 없이 HTML 범위 태그를 오른쪽 정렬하기 위한 두 가지 솔루션:

1 텍스트 앞에 범위 표시# 🎜🎜#.

<ul class="news">
    <li><span>2010-8-26</span>span右对齐,换行显示的解决方法</li>
</ul>

2. 텍스트를 float으로 두세요:left

<ul class="news">
<li><span class="fl">span右对齐,换行显示的解决方法<span><span class="fr">2010-8-26</span></li>
</ul>
.fl {float:left;}
.fr{float:right;}

두 번째 방법은 첫 번째 방법만큼 간단하지 않습니다. 웹페이지 코드 단순화를 위해 첫 번째 방법을 채택하는 것이 좋습니다. 좋아요, 위 내용은 HTML 스팬 태그의 중앙 정렬 및 오른쪽 정렬 방법에 대한 것입니다. 궁금한 사항이 있으면 아래에 문의하세요.

#🎜 🎜#【에디터 추천】

HTML에서 기본 태그의 상대 경로를 작성하는 방법은 무엇입니까? (사용설명 포함)

HTML 메타태그의 역할은 무엇인가요? HTML 메타 태그 사용 소개

위 내용은 HTML 스팬 태그를 가운데 정렬하고 오른쪽 정렬하는 방법은 무엇입니까? HTML 스팬 태그의 스타일 분석은 다음과 같습니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!