首頁 web前端 html教學 HTML span標籤如何居中和右對齊?這裡有HTML span標籤的樣式解析

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

Aug 28, 2018 pm 01:54 PM
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標籤裡面的內容就會在頁面當中居中顯示了,效果如圖:

HTML span標籤如何居中和右對齊?這裡有HTML 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中文網其他相關文章!

本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

HTML 中的表格邊框 HTML 中的表格邊框 Sep 04, 2024 pm 04:49 PM

HTML 表格邊框指南。在這裡,我們以 HTML 中的表格邊框為例,討論定義表格邊框的多種方法。

HTML 中的巢狀表 HTML 中的巢狀表 Sep 04, 2024 pm 04:49 PM

這是 HTML 中巢狀表的指南。這裡我們討論如何在表中建立表格以及對應的範例。

HTML 左邊距 HTML 左邊距 Sep 04, 2024 pm 04:48 PM

HTML 左邊距指南。在這裡,我們討論 HTML margin-left 的簡要概述及其範例及其程式碼實作。

HTML 表格佈局 HTML 表格佈局 Sep 04, 2024 pm 04:54 PM

HTML 表格佈局指南。在這裡,我們詳細討論 HTML 表格佈局的值以及範例和輸出。

HTML 輸入佔位符 HTML 輸入佔位符 Sep 04, 2024 pm 04:54 PM

HTML 輸入佔位符指南。在這裡,我們討論 HTML 輸入佔位符的範例以及程式碼和輸出。

HTML 有序列表 HTML 有序列表 Sep 04, 2024 pm 04:43 PM

HTML 有序列表指南。在這裡我們也分別討論了 HTML 有序列表和類型的介紹以及它們的範例

在 HTML 中移動文字 在 HTML 中移動文字 Sep 04, 2024 pm 04:45 PM

HTML 中的文字移動指南。在這裡我們討論一下marquee標籤如何使用語法和實作範例。

HTML onclick 按鈕 HTML onclick 按鈕 Sep 04, 2024 pm 04:49 PM

HTML onclick 按鈕指南。這裡我們分別討論它們的介紹、工作原理、範例以及各個事件中的onclick事件。

See all articles