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.hqwc.cn/news/109501.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Truenas scale 初始化设置

Truenas 安装 官网下载镜像Rufu刻录镜像实体机安装 参考 司波图YouTube, 张先生的深夜课堂&#xff0c; 小曾和他的朋友们 。 设置 设置时区 System setting -> General -> Localization 设置固定路由器IP Network -> Interface 中点击已经获取到路由器分配的 I…

Java版企业电子招标采购系统源码—企业战略布局下的采购寻源

功能模块&#xff1a; 待办消息&#xff0c;招标公告&#xff0c;中标公告&#xff0c;信息发布 描述&#xff1a; 全过程数字化采购管理&#xff0c;打造从供应商管理到采购招投标、采购合同、采购执行的全过程数字化管理。通供应商门户具备内外协同的能力&#xff0c;为外部供…

计算机专业毕业设计项目推荐06-工作室管理系统(Java+Vue+Mysql)

工作室管理系统&#xff08;JavaSpringVueMysql&#xff09; **介绍****系统总体开发情况-功能模块****各部分模块实现****最后想说的****联系方式** 介绍 本系列(后期可能博主会统一为专栏)博文献给即将毕业的计算机专业同学们,因为博主自身本科和硕士也是科班出生,所以也比较…

D3JS简介

D3JS 什么是D3js D3.js是一个流行的JavaScript数据可视化库&#xff0c;它提供了一系列的API和工具&#xff0c;用于创建交互式的数据图表、地图等可视化效果。以下是一些D3.js的特点和用途&#xff1a; 数据驱动&#xff1a;D3.js基于数据驱动的思想&#xff0c;将数据和视觉…

JavaSE、JavaEE与Spring的概念和异同点剖析以及规范13 个分析

JavaSE、JavaEE与Spring的概念和异同点剖析以及规范13 个分析 目录概述需求&#xff1a; 设计思路实现思路分析1.什么是JavaSE2.是JavaEE3.什么是Spring 参考资料和推荐阅读 Survive by day and develop by night. talk for import biz , show your perfect code,full busy&…

uniapp打包微信小程序。报错:https://api.weixin.qq.com 不在以下 request 合法域名列表

场景&#xff1a;在进行打包上传测试时&#xff0c;发现登录失效&#xff0c;但在测试中【勾选不效应合法域名】就可以。 出现原因&#xff1a;我在获取到用户code后&#xff0c;直接使用调用官方接口换取openid 解决方案&#xff1a; 可以把code带给后端&#xff0c;让他们返…

java word文档 转 html文件

用java将word转为html文档 1、简介2、添加依赖3、代码示例 1、简介 最近&#xff0c;因项目需要&#xff0c;需要对word文档进行解析拆分&#xff0c;感觉直接解析word有点麻烦&#xff0c;于是想到&#xff0c;先将word转为html文档&#xff0c;然后用jsoup解析html文件更方便…

港联证券:基本面分析的基本知识?

作为一种股票投资剖析办法&#xff0c;根本面剖析是用来研究一家公司在剖析期内的运营状况的一种办法&#xff0c;它重视公司的财政数据、盈余才能、市场占有率以及宏观经济要素等方面&#xff0c;为投资者供给了一个深化了解公司价值的方法。下面&#xff0c;本文将从多个视点…

Jprofiler的使用查看oom

一、安装 idea安装插件 安装客户端 链接 IDEA配置Jprofiler执行文件 二、产生oom import java.util.ArrayList; import java.util.List;//测试代码 public class TestHeap {public static void main(String[] args) {int num 0;List<Heap> list new ArrayList&l…

读高性能MySQL(第4版)笔记05_优化服务器设置

1. 除非遇到异常情况&#xff0c;否则不需要调整配置 1.1. 不要“调优”服务器&#xff0c;不要使用比率、公式或“调优脚本”作为设置配置变量的基础 1.1.1. 在互联网上搜索配置建议并不总是一个好主意&#xff0c;你会在博客、论坛等找到很多糟糕的建议 1.1.2. 很难判断谁…

【案例】光电兼修的Alpha Cen,如何应对上升期的甜蜜烦恼?

Alpha Cen&#xff08;比邻星光&#xff09;是一家挺酷的公司&#xff0c;专注于超表面技术芯片研发。 所谓超表面芯片&#xff0c;就是通过控制类似下图的一个个独立纳米级别单元实现光操控。用微纳光学超表面技术能够平面化集成唯一还不在wafer上的光学器件&#xff0c;这意…

设置HTTP代理隧道

在网络世界中&#xff0c;使用HTTP代理IP可以帮助我们实现一些有趣的功能&#xff0c;比如突破网络封锁、访问被限制的内容、隐藏真实IP等。现在&#xff0c;我将为你详细介绍如何设置HTTP代理服务器&#xff0c;让你轻松掌握这项技能&#xff01; 步骤一&#xff1a;了解HTTP…