在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: ...
随机推荐
- IOS中nil/Nil/NULL的区别
类与对象的概念 类是对同一类事物高度的抽象,类中定义了这一类对象所应具有的静态属性(属性)和动态属性(方法). 对象是类的一个实例,是一个具体的事物. 类与对象是抽象与具体的关系. 类其实就是一种数据 ...
- nosql（1）---radis
Radis是一个key-value数据库,它会将key放入内存中,value放在硬盘上. 可以将数据持久化存储到磁盘. 内置的主从复制: master server和slave server之间有内 ...
- （spring-第15回【IoC基础篇】）容器事件
五个人在报社订阅了报纸.报社一旦有了新报纸,就派员工分别送到这五个人手里.在这个例子中,“报纸”就是事件,“报社”就是广播器,五个订阅者就是监听器.广播器收到事件,把事件传给监听器,监听器对事件做一些 ...
- 对NSNumber的理解
1.nsnumber最重要的作用是可以封装任何的值对象,就是说nsnumber对象的类型可以是任何的类型. 如nsnumber *number = @"12" nsnumber * ...
- 爬虫学习--使用百度api---天气
#coding:utf-8#version:0.1#note:该即用API能查询指定城市的空气质量指数,但城市数量有限,截止2015年3月26日,只能查到全国161个城市的. import urlli ...
- 产生n位元的所有格雷码
原文链接:http://blog.csdn.net/beiyeqingteng/article/details/7044471 问题:产生n位元的所有格雷码. 格雷码(Gray Code)是一个数列集 ...
- Hello Qt
版本:Qt 5.5.1 Windows 参考: C++ GUI Programming with Qt 4 Second Edition 1. 打开 Qt Creator,File -> New ...
- HDU2073（暴力） VS HDU5214（贪心）
题意:给出n组l[i],r[i],求出能够相互连接的最大个数,比如(1,2) ,(2,3),(5,6)就是可以连接的3组数据: 思路:2073数组大小为100,纯暴力就可以了,不过注意排序时,按照r的 ...
- iptables 用法
又有人攻击服务器了,没有办法又的去防,这里简单介绍一种限制指定IP访问的办法. 单个IP的命令是 iptables -I INPUT -s 59.151.119.180 -j DROP 封IP段的命 ...
- LITTLE SHOP OF FLOWERS_DP
Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 20802 Accepted: 9613 Description You ...