位置: IT常识 - 正文

html 怎么设置文本对齐,文本间距,盒子居中显示(HTML怎么设置文本框)

编辑:rootadmin
html 怎么设置文本对齐,文本间距,盒子居中显示

推荐整理分享html 怎么设置文本对齐,文本间距,盒子居中显示(HTML怎么设置文本框),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:HTML怎么设置文本居中,Html怎么设置文字居中,HTML怎么设置文字位置,HTML怎么设置文字大小,Html怎么设置文字居中,HTML怎么设置文本居中,Html怎么设置文字间隔,HTML怎么设置文字大小,内容如对您有帮助,希望把文章链接给更多的朋友!

1.在一个盒子中我们怎么让文本水平,垂直居中显示

<body> <div class="box"> <p>文本水平,垂直居中</p> </div></body>

可以看到此时文本默认是在盒子的左上角显示的,可以添加行高(line-height 值与盒子高度一样就行),和文本对齐方式设置为水平居中,代码如下:

.box>p { width: 100%; height: 50px; /* 这里为了方便显示效果,加了边框 */ border: solid 2px pink; /* 段落标签中文本居中 */ /* 设置行高(与盒子高度一样就行) */ line-height: 50px; text-align: center; }

 2.怎么让盒子中的元素居中显示

<body> <div class="box"> <div>元素居中</div> </div></body>

html 怎么设置文本对齐,文本间距,盒子居中显示(HTML怎么设置文本框)

 这里我们可以看到,盒子中的元素也是默认左上角对齐的

可以为元素添加定位(position:absolute;)这里记得给父盒子加上先对定位(position:relative),然后调整边偏距 left:50%,top:50%;

这里的意思是元素距离盒子的左,上各50%(这个50%是相对于父盒子的宽高)

.box>div { width: 50px; height: 50px; /* 这里为了方便显示效果,加了边框 */ border: 2px solid blue; /* 添加定位(子绝父相) */ position: absolute; /* 相对于父盒子定位 */ left: 50%; top: 50%;

为什么这里元素并没有在正中间呢? 这是因为里面的盒子只是向右,向下移动了父盒子的宽高的50%,还有盒子自身的高度并没有计算 

这里有两种方法可以调整:

1. 调整盒子外边距(margin)

margin-left:-25px;margin-top: -25px; 25px是元素盒子的宽高的一半,这里不可以写50%哟。

/* 1.添加外边距 */ margin-top: -25px; margin-left: -25px;

2. 利用css2D属性transform来调整

transform: translate(-50%,-50%); 这里是相对于元素盒子的50%。

/* 2.利用2D移动(transform:translate()) */ transform: translate(-50%, -50%);

本文链接地址:https://www.jiuchutong.com/zhishi/290806.html 转载请保留说明!

上一篇:CiteSpace关键词共现图谱含义详细解析与注意事项(citespace关键词共现分析)

下一篇:日落时分的阿萨巴斯卡瀑布,加拿大 (© Robert Postma/Getty Images)(日落时分谭咏麟歌词)

  • 增值税需要计入入账价值吗
  • 淘宝买货没有发票
  • 间接持股比例怎么
  • 国有企业党组织工作应遵循的原则包括
  • 股息和资本利得的区别
  • 职工福利基金提取规定
  • 报销退回多余款项怎么开收据
  • 为什么要预提企业收入
  • 行政相对人和行政管理相对人的区别
  • 饭店试菜费用如何计算
  • 独生子女补贴怎么查询
  • 应付票据发生与偿还怎么计算?
  • 固定资产转移是什么意思
  • 抵押房屋可以出卖吗
  • 奖励先进个人计划怎么写
  • 车辆理赔款计入什么科目
  • 预付账款坏账处理流程
  • 什么叫经济作物和粮食作物
  • 网络限速数值
  • ramaint.exe - ramaint是什么进程 有什么用
  • 运输业什么进项税抵扣
  • 企业变更股东要交税吗
  • 苹果mac怎么删除照片
  • 以商业汇票抵付应付账款会计分录
  • 雪花 (© TothGaborGyula/Getty Images Plus)
  • 如何在你的电脑上截图
  • 业务招待费个税账务处理办法
  • php怎么输出文字
  • thinkphp框架作用
  • thinkphp批量导入数据
  • 如何把html数据导入表格
  • 持有至到期投资是什么意思
  • 自动化工具 业务有哪些
  • ntpd命令
  • 库存商品盘亏计入哪个科目
  • gfortran编译命令
  • 小规模纳税人增值税月末处理
  • 转账有手续费没有
  • 企业税金总额包括什么
  • 在什么情况下要切除子宫
  • phpcms api
  • 税前补发补扣
  • 跨年度退回的公共预算支出
  • 幼儿园伙食账目
  • 信用减值损失与资产减值损失
  • 资产减值损失科目借方增加还是减少
  • 招待客户对公司的重要性
  • 开公司的车出差违章算谁的
  • 一般纳税人开红字专用发票流程
  • 注册资金没有到位
  • 固定资产盘点基本情况
  • 记账凭证的分类及每类的具体含义是什么
  • 单位购入车辆能抵扣吗
  • 什么情况下要暂扣驾驶证
  • 存储过程mysql
  • windows故障
  • windowsserver2008远程桌面怎么打开
  • centos中rpm包怎么安装
  • 怎么处理鲍鱼
  • win10任务栏恢复原样
  • win10商店是什么
  • xp系统设置壁纸
  • 在Linux系统中安装虚拟window
  • windows的服务怎么打开
  • linux程序死机
  • jquery获取本地ip
  • mac nums
  • perl-v
  • opengl入门教程
  • nodejs利用http模块实现银行卡所属银行查询和骚扰电话验证示例
  • python作业题目
  • python爬虫全套教程
  • shell输出1到100
  • js实现组件功能
  • 简述javascript
  • 最简单手电筒
  • python文件遍历
  • bpc什么时候进入中国
  • 油品贸易公司资质
  • 必须抓好什么治理能力和治理体系
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设