当前位置: 首页 > news >正文

CSS文字居中对齐学习

CSS使用text-align属性设置文字对齐方式;text-align:center,这样就设置了文字居中对齐;

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>css 水平居中</title><style>.box {background: pink;text-align:center;}h1 {text-align:center;}</style></head><body><h1>我是标题</h1><div class="box" style="width: 200px;height: 100px;border: 3px solid green;">AAB文本BCC</div><div class="box" style="width: 100px;height: 50px;border: 3px solid green;">文字</div><p class="box">2021 年 01 月 01 号</p><a class="box" url="">aaaaa请单击ccccccccc</p><table border="1"><tr><td>A</td><td>行1,列2</td></tr><tr><td>行2,列1</td><td>行2,列2</td></tr></table></body></html>

做一个html文档,网页元素包括:h1, 一个div,一个div,一个p(段落),一个链接(a),一个表格;

定义了CSS样式类box,其中指定了背景色为pink,文字对齐为居中对齐;定义了h1元素的文字对齐方式为居中;

2个div引用了css类box;p和a也引用了样式类box;

运行如下;

h1的文字居中对齐了;

2个div也是;

p元素没有指定宽度的情况下默认占一整行,文字也居中对齐了;

a元素指定文字居中对齐看上去没有意义,a元素的默认宽度自动调整为其中文字占据的宽度;

表格没有指定单元格的文字对齐方式,<td>A</td> 这个单元格的文字宽度不够单元格宽度,默认是居中对齐的;

http://www.lryc.cn/news/162920.html

相关文章:

  • 《论文阅读》CARE:通过条件图生成的共情回复因果关系推理 EMNLP 2022
  • React 开发一个移动端项目(1)
  • c#查看代码的执行耗时( Stopwatch )
  • Python网络爬虫库:轻松提取网页数据的利器
  • YOLOv5算法改进(15)— 更换Neck之AFPN
  • Vue2项目练手——通用后台管理项目第七节
  • 《Web安全基础》04. 文件操作安全
  • docker-compose安装nginx
  • 报错处理:MySQL无法启动
  • Vue中表单手机号验证与手机号归属地查询
  • 初高(重要的是高中)中数学知识点综合
  • Fiddler 系列教程(二) Composer创建和发送HTTP Request跟手机抓包
  • 淘宝平台开放接口API接口
  • 缓存夺命连环问
  • 模型生成自动化测试用例
  • 归并排序-面试例子
  • docker 生成镜像的几个问题
  • 云计算时代的采集利器
  • 【Unity编辑器扩展】| Inspector监视器面板扩展
  • Redis配置
  • CSDN每日一练 |『小艺照镜子』『Ctrl+X,Ctrl+V』『括号上色』2023-09-11
  • React 全栈体系(四)
  • 各种UI库使用总结
  • 2023Web前端开发面试手册
  • 一文了解数据科学Notebook
  • 2020年12月 C/C++(二级)真题解析#中国电子学会#全国青少年软件编程等级考试
  • 关于ChatGPT的个人的一些观点
  • Solidity 小白教程:13. 继承
  • 队列(Queue)的顶级理解
  • 选择 Guava EventBus 还是 Spring Framework ApplicationEvent