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

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

程式猿的生活：打造全網web前端全棧資料庫（總目錄）看完學的更快，掌握的更加牢固，你值得擁有（持續更新）

首先我們來看看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標籤的例項吧：

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

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

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

html如下：

• span右對齊，換行顯示的解決方法2010-8-26

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

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

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

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

一、把span先於文字顯示

• 2010-8-26span右對齊，換行顯示的解決方法

二、讓文字float:left

• span右對齊，換行顯示的解決方法2010-8-26

。fl {float：left；}

。fr{float：right；}

第二種方法沒有第一種方法簡單，為了網頁程式碼的簡潔性，建議採用第一種方法。

好了，以上就是關於HTML span標籤的居中和右對齊的方法了，希望對你有幫助，有問題的可以在下方提問。

在這裡謝謝大家一直對小編的支援，點贊謝謝！