在网页中常用到的几种居中方法
时间:2022-07-26
本文章向大家介绍在网页中常用到的几种居中方法,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
1、行内元素水平居中,可以在父元素中使用text-align:center;垂直居中可以用,line-height:100px;例如:
<style type="text/css">
div{<br />
width:300px;<br />
height:100px;<br />
text-align:center;<br />
line-height:100px;<br />
}<br />
</style>
<div>文字居中</div>
2、块级元素水平居中,可以用margin:auto;代码如下:
<style type="text/css">
div{<br />
width:300px;<br />
height:100px;<br />
margin:0px auto;//上下边距为0,水平居中<br />
background:#ccc;<br />
}<br />
</style>
<div>文字居中</div>
3、元素绝对居中,利用定位position,代码如下:
<style type="text/css">
div{<br />
width:300px;<br />
height:100px;<br />
position:relative;<br />
}<br />
div p{<br />
width:100px;<br />
height:20px;<br />
position:absolute;<br />
margin:auto;<br />
top:0;<br />
bottom:0;<br />
left:0;<br />
right:0;<br />
}<br />
</style>
<div>文字居中</div>
4、元素绝对居中的另一种方法,代码如下:
<style type="text/css">
div{<br />
width:300px;<br />
height:100px;<br />
position:relative;<br />
background:#bbb;<br />
}<br />
div p{<br />
width:100px;<br />
height:20px;<br />
position:absolute;<br />
top:50%;<br />
margin-top:-10px;<br />
left:50%;<br />
margin-left:-50px;<br />
}<br />
</style>
<div>文字居中</div>
- Python: numpy总结(2)
- class 类—老司机的必修课 | 统计师的Python日记 第11课
- Python:matplotlib
- Python: matplotlib安装
- Java后端实现图片压缩技术(赞赏功能已开通,欢迎测试,噗~!)
- 我是如何得知10W+的访问量多来自工作日的 | 塔秘
- 使用百度UMeditor富文本编辑器,修改自定义图片上传,修改源码
- 【技术专栏】OpenVirteX体系结构之组件(一)
- 洞察 | 深圳数据分析师的职业前景如何?爬完拉勾数据给你分析 (附代码和过程)
- 【温故】金融数据挖掘之朴素贝叶斯
- 为你的网站加上SSL,可以使用HTTPS进行访问
- LeeCX - 开源后台管理系统简单介绍
- fastdfs 图片服务器 使用java端作为客户端上传图片
- Shiro系列(3) - What is shiro?
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 从头创建您自己的vue.js——第2部分(虚拟DOM基础)
- Manage Jenkins报错:"依赖错误: 部分插件由于缺少依赖无法加载...",解决办法
- 从头创建您自己的vuei .js——第3部分(构建VDOM)
- adb 模拟上下左右滑动,示例演示
- python 技术篇-pythoncom.PumpMessag()关闭、杀死它的进程,pythoncom.PumpMessag()运行卡住解决办法
- PyQt5 技术篇-QWidget、QDialog程序窗口关闭closeEvent()触发事件方法重写
- 恕我直言你可能真的不会java第6篇:Stream性能差?不要人云亦云
- python-技术篇-打印详细报错日志,获取报错信息位置行数
- React从入门到放弃,一个关于网页速度的故事
- python 技术篇-日志定期清理设置,自动清理上个月的日志实例演示
- python 技术篇-日志模块自定义时间格式
- 恕我直言你可能真的不会java第12篇-如何使用Stream API对Map元素排序
- JavaScript错误处理完全指南
- 从头创建您自己的vue.js——第4部分(构建反应性)
- Oracle 数据库-服务器端字符集查看方法