CSS实现文字对齐效果总结
写在前面的话:在前端页面的编写中,往往会遇到对文字排版的处理,本篇文章旨在对文字排版进行总结,如文字的对齐方式,是否首行缩进等。
一. text-align 设置文本的对齐方式
- 设置左对齐:text-align:left
- 设置中间对齐:text-align:center
- 设置右对齐:text-align:right
代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>css文字对齐</title> </head> <body> <style> .txt-center { text-align: center; } .txt-left { text-align: left; } .txt-right { text-align: right; } .txt-justify { text-align: justify; } .txt-justify:after { display: inline-block; width: 100%; content: ''; } div { width: 400px; margin: 0 auto; border: 1px solid #eeeeee; padding: 20px; } h1 { text-align: center; } </style> <h1> 中间对齐 </h1> <div class="txt-center">中间对齐中间对齐中间对齐</div> <h1> 左边对齐 </h1> <div class="txt-left">左边对齐左边对齐左边对齐</div> <h1> 右边对齐 </h1> <div class="txt-right">右边对齐右边对齐右边对齐</div> <h1> 两端对齐 </h1> <div class="txt-justify"> 两端对齐两端对齐gfdgfdgfdgfdgg 齐两端对齐两端对齐两端对齐两端对齐两端对齐两端对齐两端对齐两端对齐两端对齐两端对齐 </div> </body> </html>
注意,两端对齐的时候必须加上after伪类,否则没有效果
二.justify-content对齐
使用justify-content属性的前提是使用flex布局,即display: flex;
- justify-content: start; //左对齐
- justify-content: center;//中间对齐
- justify-content: end;//右对齐

代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>css文字对齐</title> </head> <body> <style> div { width: 400px; margin: 0 auto; border: 1px solid #eeeeee; padding: 20px; } h1 { text-align: center; } .flex { display: flex; } .flex-txt-left { justify-content: start; } .flex-txt-center { justify-content: center; } .flex-txt-right { justify-content: end; } .flex-txt-justify { justify-content: space-between; } </style> <h1> display: flex 中间对齐 </h1> <div class="flex flex-txt-center">中间对齐中间对齐中间对齐</div> <h1> display: flex 左边对齐 </h1> <div class="flex flex-txt-left">左边对齐左边对齐左边对齐</div> <h1> display: flex 右边对齐 </h1> <div class="flex flex-txt-right">右边对齐右边对齐右边对齐</div> <h1> display: flex 两端对齐 </h1> <div class="flex flex-txt-justify"> <span> 两端 </span> <span> 齐两端 </span> </div> </body> </html>
微信公公众号 搜索 “不正经小前端” 并关注,和我一起学习海量前端技术
本文来自博客园,作者:七分暖,转载请注明原文链接:https://www.cnblogs.com/lin494910940/p/16228770.html
分类:
css奇技淫巧
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· [翻译] 为什么 Tracebit 用 C# 开发
· 腾讯ima接入deepseek-r1,借用别人脑子用用成真了~
· Deepseek官网太卡,教你白嫖阿里云的Deepseek-R1满血版
· DeepSeek崛起:程序员“饭碗”被抢,还是职业进化新起点?
· RFID实践——.NET IoT程序读取高频RFID卡/标签