200字范文,内容丰富有趣,生活中的好帮手!
200字范文 > 如何使用CSS实现文本左对齐 右对齐和居中对齐

如何使用CSS实现文本左对齐 右对齐和居中对齐

时间:2019-12-26 13:31:17

相关推荐

如何使用CSS实现文本左对齐 右对齐和居中对齐

web前端|css教程

对齐

web前端-css教程

文本的位置在网页布局中是必不可少的,今天的这篇文章就来给大家分享关于使用CSS实现文本左对齐、右对齐和居中对齐的方法,下面我们来看具体的内容。

源码站baidu,vscode多选快捷键,ubuntu下载scp,如何删除tomcat日志,沙爬虫成虫,php一维数组拆分,上海seo营销服务商,招聘信息发布网站源码,ecshop文章不同模板lzw

要设置文本对齐(左对齐,右对齐,居中对齐)需要用到的CSS属性是text-align属性。(相关推荐:CSS学习手册)

出售手游源码,命令打开vscode,ubuntu udf,tomcat需要下载,c语言 sqlite查询,members 插件,不属于前端常用框架,网页爬虫cookie自动获取,php完全手册下载,seo自动采集新闻,sns网站 完全开源,网页点击返回顶部,app 下载页面模板lzw

语法格式:

学生成绩管理系统.net源码,ubuntu的数据显示,tomcat停止脚本停不了,极限挑战爬虫,学习php debug交流,seo关键词排名优化哪家便宜lzw

text-align :(文本位置)

接下我们来分别看看这四种对齐方式的设置方法

文本左对齐的设置方法:

text-align:left;

文本右对齐设置方法:

text-align:right;

文本居中对齐设置方法:

text-align:center;

文本两端对齐设置方法:

text-align:justify;

我们来看具体的代码示例1:

TextAlign.html

php中文网左对齐

php中文网

php中文网

php

php中文网右对齐

php中文网

php中文网

php

php中文网居中对齐

php中文网

php中文网

php

php中文网

两端对齐

php中文网

php

TextAlign.css

.TextLeft{ margin-top:24px; margin-left:32px; border:1px solid #ff6a00; width:480px; text-align:left;}.TextRight { margin-top: 24px; margin-left: 32px; border: 1px solid #ff6a00; width: 480px; text-align: right;}.TextCenter { margin-top: 24px; margin-left: 32px; border: 1px solid #ff6a00; width: 480px; text-align: center;}.TextJustify { margin-top: 24px; margin-left: 32px; border: 1px solid #ff6a00; width: 480px; text-align: justify; text-justify: distribute-all-lines;}

显示结果

使用Web浏览器显示上述HTML文件。将显示如下所示的效果。

代码示例2:

文本左对齐:

.leftText{ text-align:left; }

左对齐

文本右对齐:

.rightText{ text-align:right; }

右对齐

居中对齐:

.centerText{ text-align:center; }

居中对齐

本篇文章到这里就全部结束了,更多关于文本对齐的内容大家可以关注php中文网的CSS视频教学栏目!!!

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。