在div中设置文字与内部div垂直居中
2024-10-05 07:03:24
要实现如图一所示的结果：
html代码如下：
<!DOCTYPE html>
<html> <head lang="zh">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta charset="utf-8" />
<title>商品管理后台首页</title>
<link rel="stylesheet" href="./css/index.css" />
</head> <body>
<div class="content">
<span>这是一个测试要居中</span>
<div class="box">我是div中的文字</div>
</div>
</body> </html>
相应的less代码
.content{
width: 500px;
height: 200px;
border:1px solid red;
position: relative;
line-height: 200px;/*让class=content父div中的文字垂直居中*/
span{
background: green;
}
.box{
background: yellow;
float: left;
width: 200px;
height: 100px;
line-height: 100px;/*让黄色div中的文字内容垂直居中*/
text-align: center;/*让文字水平居中*/
position: absolute;
top:50%;
margin-top: -50px;
margin-left: 200px;
}
}
②使用vertical-align:middle设置在父元素中的位置，
效果图：
html代码：
<!DOCTYPE html>
<html>
<head lang="zh">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta charset="utf-8" />
<title>商品管理后台首页</title>
<link rel="stylesheet" href="./css/index.css" />
</head> <body>
<div class="content">
我是div中的文字<div class="pox">我是子元素的文字</div>
</div>
</body> </html>
相应的css代码：
.content{
width: 500px;
height: 200px;
line-height: 200px;/*设置其文字内容垂直居中*/
border:1px solid red;
.pox{
background: yellow;
width: 200px;
height: 70px;
display: inline-block; /*一定要将div设置为inline-block*/
vertical-align: middle;/*设置该元素在父元素中的位置*/
line-height: 70px;
border: 1px solid green;
text-align: center;
}
}
化简后的核心代码：
.content{
width: 500px;
height: 200px;
line-height: 200px;/*设置其文字内容垂直居中*/
background:red;
.pox{
height: 70px;/*给内部div设置了高度，该div才会垂直居中*/
display: inline-block; /*一定要将div设置为inline-block*/
vertical-align: middle;/*设置该元素在父元素中的位置*/
background: yellow;
}
}
最新文章
- Entity Framework 教程——模型浏览器
- java基础1.0：:Java面向对象、面向对象封装、抽象类、接口、static、final
- 设计模式：策略模式（Strategy）
- iOS7 下去掉状态栏(全屏)
- Hibernate 中update hql语句
- 数列平方根的和 java
- HDU1398Square Coins（母函数）
- ALERT日志中常见监听相关报错之中的一个：ORA-609错误的排查
- App评分
- python处理.seq文件
- linux mount挂载设备（u盘,光盘,iso等 ）使用说明
- vue动画的用法
- 201621123060 《Java程序设计》第五周学习总结
- MSSQL---extents
- 关于使用Git的几点小技巧
- PMP知识点（四）——项目管理计划的内容
- Zookeeper~Linux环境下的部署
- 转 -- Vim 常用快捷键
- vue框架导入百度地图API接口的方法
- VUE CLI 3.0 项目引入 Mock.js