當前位置:妙知谷 >

遊戲數碼 >互聯網 >

HTML-矩形中的文字如何居中對齊方法

HTML-矩形中的文字如何居中對齊方法

今天我們利用p標籤來做下文字居中的文字,p標籤是段落標籤,也是自動換行。

操作方法

(01)在body標籤欄下,用div包含着p標籤,如圖

HTML-矩形中的文字如何居中對齊方法

(02)然後在css樣式中,將div設置寬高比例大小,

HTML-矩形中的文字如何居中對齊方法 第2張

(03)這時候我們預覽效果,如圖所示,文字在矩形中顯示,這個矩形就是div,p標籤內的內容就是文字信息

HTML-矩形中的文字如何居中對齊方法 第3張

(04)然後我麼對文字p加以修飾效果,添加顏色和字號

HTML-矩形中的文字如何居中對齊方法 第4張

(05)這時候在看下效果,如圖

HTML-矩形中的文字如何居中對齊方法 第5張

(06)然後將文字水平居和垂直居中放置,水平居中我們可以在父級div中做文字居中標籤text-align:center;垂直居中我們可以利用文字行高的特性將文字垂直居中

HTML-矩形中的文字如何居中對齊方法 第6張

(07)最後效果出現了,利用文字居中標籤和行高標籤就可以將文字居中了。

HTML-矩形中的文字如何居中對齊方法 第7張

特別提示

如果對您有幫助,請左側點贊哦!

標籤: HTML 對齊 矩形 居中
  • 文章版權屬於文章作者所有,轉載請註明 https://miaozhigu.com/sm/hulianwang/8m62ke.html