在div中设置文字与内部div垂直居中
要实现如图一所示的结果：
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;
}
}
在div中设置文字与内部div垂直居中的更多相关文章
- 实现全屏轮播，并且轮播div中的文字盒子一直自动垂直居中
效果如下: 直接上代码了: 说明:轮播图基于swiper.js,自行下载.css在最后 <!DOCTYPE html> <html lang="en"> & ...
- div中单行文字垂直水平居中
1.div中单行文字垂直水平居中.条件:外层div高度已经给定.代码如下: 复制代码代码如下: <style type="text/css">.div3{border: ...
- 大div中，三个小div水平居中
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- JavaScript设置div中的文字滚动起来 实现滚动效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 禁止鼠标多次点击选中div中的文字
<!DOCTYPE html><html><head><meta charset="utf-8"><title>Fire ...
- div中让文字垂直居中
在div中如何让文字垂直居中? 作者在刚接触web前端开发时就遇到了这个问题,一直没有记录下来,今天正好有空,便记录下来. 为了方便展示,我把style先直接写在了div里. 效果如下图所示: 图1. ...
- 如何让div中的文字只显示一行，多余的文字隐藏并加上省略号（超链接形式）
写页面的时候遇到了一个小小的问题,如何让div中一行超链接文字只显示一行,多余的文字隐藏并加上省略号,悬浮时隐藏的文字显示出来?解决问题时发现了css3的一个新标签 text-overflow , ...
- css之div中纯文字单行和多行垂直居中
先上效果图 <html lang="en"> <head> <meta charset="UTF-8"> <meta ...
- div中设置滚动条的问题
<div srtle="width:100px;height:50px;"></div> 这样的一个div,当文本超出的时候我们就会设: overflow: ...
随机推荐
- 最新java数组的详解
java中HashMap详解 http://alex09.iteye.com/blog/539545 总结: 1.就像引用类型的数组一样,当我们把 Java 对象放入数组之时,并不是真正的把 Java ...
- 解决使用IIS5.0配置的FTP服务器，客户端浏览器访问时无法获取目录列表的问题。
我在windows xp sp3下利用iis构架了FTP服务器,允许且只允许匿名用户登陆.但刚开始配置好后,不管是使用命令行模式还是使用浏览器都发现无法访问. 于是怀疑防火墙屏蔽端口所致,果不其然,在 ...
- JS 基于面向对象的 轮播图2
<script> // 函数不能重名, --> 子函数 // is defined function --> 函数名是否写错了 function AutoTab(id) { T ...
- .net CHARTING图表控件下载地址
.net CHARTING是一款功能强大的图表控件,利用.NET framework和GDI+为工作于ASP.NET和Winform的C#和VB.NET开发人员提供可托管的图表解决方案,提供了多种2D ...
- jquery模拟淘宝购物车
今天要实现的一个功能页面就是利用jquery代码模拟一个淘宝网的购物车结算页面 总体页面效果如图: 首先我们要实现的内容的需求有如下几点: 1.在购物车页面中,当选中“全选”复选框时,所有商品前的复选 ...
- Android Material Design Ripple Effect在Android5.0（SDK=21）以下Android版本崩溃问题解决
Android Material Design Ripple Effect在Android5.0(SDK=21)以下Android版本崩溃问题解决 附录1的Android Ripple Effect水 ...
- 微信Accesstoken通过xml文件方式保存
//获取accessToken public static AccessToken GetAccessToken() { string AppID = JobBase.GetConfParamValu ...
- dat文件中如何编写DOS的多行命令
dat文件中如何编写DOS的多行命令 2012-10-15 11:29 四海柔情108 分享到: 2012-10-16 23:36 提问者采纳 你问的应该是BAT文件吧?BAT是DOS命令的批 ...
- java 函数 运算符
1. 函数的重载:多个函数名相同,根据参数列表(个数,类型)选择执行不同函数,不能按返回值类型区分. 2. 运算符: / /两头都是int类型 则做求商运算,如果一头有小数就做正常的除运算 5/2 / ...
- Linux Shell 命令
(1) 操作一个文件并对文件查询行进行切分处理 (或者1-) (2) 操作文件进行去重并显示重复次数 | sort | uniq -c (3) 查看总的汇总行数 | sort | uniq -c | ...