CSS教學-讓文字在網頁也能顯示上、下標文字

梅問題-CSS教學-利用CSS實現文字在網頁中顯示上下標文字
  有時候像是數學運算式,或是特殊名詞,文字會有上標或下標,因此在平面上,沒什麼太大的問題,許多影像軟體內建就有此功能,只要指定一下,就可將特定文字變成上標或下標,但在網頁時,該怎麼辦呢?大部分的朋友,應該會直接選擇製作成一張圖片,再將它安插在網頁中,但當圖片插入文字時,就會出現文字對齊的問題,因此對於文字上下標,其實透過CSS內建的語法,就可實現網頁上下標的夢想啦!且設定方法超簡單的,所以梅干就直接的實作一下,因此若有這方面需求的朋友,不妨也參考看看。

文字上標(super):
語法:vertical-align:super;(垂直向上對齊)
範例預覽:
梅問題-CSS教學-利用CSS實現文字在網頁中顯示上下標文字

文字下標(sub):
語法:vertical-align:sub;(垂直向下對齊)
範例預覽:
梅問題-CSS教學-利用CSS實現文字在網頁中顯示上下標文字

其實只要利用垂直對齊的方式,就可實現上、下標文字啦!因此下回若遇到時,不妨可試看看,就不用再將它作成圖片啦!且所有的瀏覽器皆支援,同時也可針對上、下標字,再設定它的字級與色彩,因此無論是數學運算式,還是專有名詞皆適用。
[範例預覽]

相關文章

「Lazy Load CSS」非同步載入CSS,當網頁使用雲端字型更順暢

「Lazy Load CSS」非同步載入CSS,當網頁使用雲端字型更順暢

CSS3-clip-path繪製不規則形遮色片線上產生器

CSS3-clip-path繪製不規則形遮色片線上產生器

CSS教學-hover滑入圖片時,加入CSS3動畫特效「淡入淡出」變換圖片

CSS教學-hover滑入圖片時,加入CSS3動畫特效「淡入淡出」變換圖片

將ICON Fonts向量圖示字型引用到CSS中(Font Awesome為例)

將ICON Fonts向量圖示字型引用到CSS中(Font Awesome為例)

CSS3動畫hover套件,各種常用的互動特效直接套用

CSS3動畫hover套件,各種常用的互動特效直接套用





回應本篇 »

(姓名)*必填
(信箱)*必填
(網站)

※PS: 因梅干時間有限,教學網中所分享的主題繁多(所遇狀況也很多),可能無法一一回答各位,不便之處還請見諒。
※PS: 本教學網不提供「破解檔」、「註冊機」或「註冊碼」等資訊,請勿利用留言索取檔案。

共 3 梅留言

  • 第3梅
    辣妹新 說道:

    梅干老師寫了一個錯字哦,提醒你一下
    最後一段文字中的「不坊」,是「妨」哦!

    我喜歡梅干老師分享的知識,對我這個網頁設計人來說,幾乎是每天必看,解決疑難雜症的好地方
    繼續加油吧!老師

    回應:
    感謝已更正
  • 第2梅
    OKA 說道:

    sub 跟 sup 標籤。

  • 第1梅
    OKA 說道:

    Hi 梅干,其實html原本就是物理學家開發,用來顯示學術內容而編訂的,所以在還沒發明css前,上下註解標籤很早就被開始支援囉!尤其是E=MC"2″這種算式,在網站沒有載入css的情況下,也應該被正確顯示(因為這算是內容部分,而不應該裝飾樣式),梅干可以參閱一下跟標籤。 ex:應寫成"E=MC2″

    回應:
    哇賽!!感謝告知~讓梅干學到一課了!