首页 > 游戏数码 > 互联网 > HTML-矩形中的文字如何居中对齐方法

HTML-矩形中的文字如何居中对齐方法

   来源:秒知站    阅读: 2.18W 次
字号:

用手机扫描二维码 在手机上继续观看

手机查看

今天我们利用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张

特别提示

如果对您有帮助,请左侧点赞哦!

电脑网络
IT技术
互联网
电脑
摄影
手机
游戏