HTML span標籤如何居中和右對齊？這裡有HTML span標籤的樣式解析

本篇文章主要的敘述的是在HTML中的span標籤的文字是要如何居中和右對齊的，這裡還有各種實例說明，下面就讓我們一起來看看吧

首先我們來看看HTML span屬性如何居中的？

其實想要這個span文字居中，有不少辦法，這裡提供了一種比較容易做的辦法就是在程式碼中插入以下一行程式碼：

style= " text-align:center；line-height:18px; " 

水平居中text-align:center； 

設定行高line-height:18px; 同span高度一樣，那麼文字就可以垂直居中了（僅限一行文字）。

水平居中很簡單，設定text-align:center就可以了，但是垂直居中一直都不得其解！

以前總是嘗試著調padding-top,但是有的時候好使，更多的時候不行，今天同樣，當height值不大時，增加padding-top就會增加了整個DIV或者SPAN的高度。

正在想理論上vertical-align的預設值應該是baseline啊，不會頂對齊啊，突然想起字體有個line-height屬性，於是很顯然其預設值就是一個字那麼高，於是將line-height值改得和DIV或SPAN的height相同！ 

這樣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>

這樣span標籤裡面的內容就會在頁面當中居中顯示了，效果如圖：

接下來我們該解決的問題是如何右對齊呢？

我們常常在做網站的時候會div,li,span中加入span右對齊，例如：文章清單中在我們會加入時間讓它右對齊，以增加網頁的可讀性，如下程式碼：

html如下：

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

css：.news ul li span{float:right;}

不過問題又來了，往往我們在一個區塊中加入span時就會發現在網頁中預覽時span換行右對齊了，那麼這是為什麼呢？

原來是因為：當非float元素和float元素在一起的時候，假如非float元素在前，那麼float元素將被排拆，所以，即使span是float:right，但文字顯示是float:none，所以span將被排斥。

html span標籤右對齊不換行的兩種解決方法：

#一、把span先於文字顯示

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

二、讓文字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 span標籤的居中和右對齊的方法了，希望對你有幫助，有問題的可以在下方提問

【小編推薦】

HTML中的base標籤如何寫相對路徑？ （內附使用介紹）

HTML meta標籤的作用是什麼？ html meta標籤的使用方法介紹

以上是HTML span標籤如何居中和右對齊？這裡有HTML span標籤的樣式解析的詳細內容。更多資訊請關注PHP中文網其他相關文章！