Rumah > hujung hadapan web > Soal Jawab bahagian hadapan > css文字在底部怎么写

css文字在底部怎么写

藏色散人
Lepaskan: 2023-01-03 09:26:03
asal
7265 orang telah melayarinya

css文字在底部的实现方法:首先新建一个html文件,并使用div标签创建一个模块;然后设置div的class属性为con;接着分别在css标签内创建div和p元素的样式;最后设置其位置属性为绝对定位即可。

css文字在底部怎么写

本教程操作环境:windows7系统、HTML5&&CSS3版、Dell G3电脑。

新建一个html文件,命名为test.html,用于讲解css中怎么样才能使内容在div的底部中间。

e5a7afab6708186798b1eab27789bb4.png

在test.html文件内,使用div标签创建一个模块,在其内部使用p标签创建一行文字。

 

1d71829fb4fe1482ab1365f09ee840a.png

设置div的class属性为con,用于下面使用css对其进行样式设置。

 

ce2788385664bad1028fe6ddab51280.png

在test.html文件内,分别在css标签内创建div和p元素的样式设置。【推荐:《css视频教程》】

 

7624d1f42b1129b6d8f435eaaa71a1f.png

在css中,对类名为con的div进行样式设置。设置其位置属性为绝对定位(position:absolute),宽度为300px(width:300px),高度为300px(height:300px),背景颜色为黄色 (background:yellow)。

 

7c953b88135166b30a9c7605e5f45ce.png

在css中,对p元素进行样式设置。设置其位置属性为绝对定位(position:absolute),在div的底部(bottom:0),宽度为100%(width:100%),文字居中显示(text-align:center)。

ddf49ef131ced8f5bbfc853bbbcc3ec.png

在浏览器打开test.html文件,查看文字在div底部居中的效果。

 

3ceecf273263d5d762578d649002386.png

Atas ialah kandungan terperinci css文字在底部怎么写. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan:
css
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan