0

0

css怎样设置文本格式两端对齐

WBOY

WBOY

发布时间:2021-12-07 17:30:56

|

10506人浏览过

|

来源于php中文网

原创

方法:1、在文本元素中添加具有“display:inline-block;width:100%”样式的i标签;2、利用“text-indent”属性让插入i标签的文本元素两端对齐,语法为“文本元素{text-align:justify}”。

css怎样设置文本格式两端对齐

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

css怎样设置文本格式两端对齐

在css中,可以将text-indent属性设置为justify,实现文字两端对齐。下面举例讲解css如何让文字两端对齐。

1、新建一个html文件,命名为test.html,用于讲解css如何让文字两端对齐。使用div标签创建一行文字,用于测试。

立即学习前端免费学习笔记(深入)”;

在css标签内,通过div元素名称设置div的样式,定义div的宽度为500px,背景颜色为黄色,同时将text-align属性设置为justify。

33.png

2、以上的样式设置并不会实现两端对齐,还需要定义一个空标签来辅助实现。在div内,再使用一个i标签辅助实现两端对齐。

在css标签内,再设置i标签的样式,定义其display属性,同时设置i标签的宽度为百分一百

34.png

Google AI Studio
Google AI Studio

Google 推出的基于浏览器的集成开发环境

下载

在浏览器打开test.html文件,查看实现的效果。

35.png

总结:

1、使用div标签创建一行文字。

2、在div内,再定义一个空标签,例如 ,i标签。

3、在css中,使用text-align属性设置为justify,同时设置i标签的宽度为100%。

注意事项

除了使用i标签外,还可以使用span标签等。

(学习视频分享:css视频教程

相关专题

更多
Java 项目构建与依赖管理(Maven / Gradle)
Java 项目构建与依赖管理(Maven / Gradle)

本专题系统讲解 Java 项目构建与依赖管理的完整体系,重点覆盖 Maven 与 Gradle 的核心概念、项目生命周期、依赖冲突解决、多模块项目管理、构建加速与版本发布规范。通过真实项目结构示例,帮助学习者掌握 从零搭建、维护到发布 Java 工程的标准化流程,提升在实际团队开发中的工程能力与协作效率。

10

2026.01.12

c++主流开发框架汇总
c++主流开发框架汇总

本专题整合了c++开发框架推荐,阅读专题下面的文章了解更多详细内容。

102

2026.01.09

c++框架学习教程汇总
c++框架学习教程汇总

本专题整合了c++框架学习教程汇总,阅读专题下面的文章了解更多详细内容。

60

2026.01.09

学python好用的网站推荐
学python好用的网站推荐

本专题整合了python学习教程汇总,阅读专题下面的文章了解更多详细内容。

139

2026.01.09

学python网站汇总
学python网站汇总

本专题整合了学python网站汇总,阅读专题下面的文章了解更多详细内容。

13

2026.01.09

python学习网站
python学习网站

本专题整合了python学习相关推荐汇总,阅读专题下面的文章了解更多详细内容。

19

2026.01.09

俄罗斯手机浏览器地址汇总
俄罗斯手机浏览器地址汇总

汇总俄罗斯Yandex手机浏览器官方网址入口,涵盖国际版与俄语版,适配移动端访问,一键直达搜索、地图、新闻等核心服务。

92

2026.01.09

漫蛙稳定版地址大全
漫蛙稳定版地址大全

漫蛙稳定版地址大全汇总最新可用入口,包含漫蛙manwa漫画防走失官网链接,确保用户随时畅读海量正版漫画资源,建议收藏备用,避免因域名变动无法访问。

477

2026.01.09

php学习网站大全
php学习网站大全

精选多个优质PHP入门学习网站,涵盖教程、实战与文档,适合零基础到进阶开发者,助你高效掌握PHP编程。

52

2026.01.09

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
Sass 教程
Sass 教程

共14课时 | 0.8万人学习

Bootstrap 5教程
Bootstrap 5教程

共46课时 | 2.9万人学习

CSS教程
CSS教程

共754课时 | 18.5万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号