在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: ...
随机推荐
- FZU 2072 - Count
题意:给一个数组,每次查询输出区间内数字x出现的次数. 每次查询数字x是与其它数字无关的,所以我们可以以每个数字为索引建立一个链表,里面存放它出现的下标,这里可以保证是递增的.每次查询数字x,就在x的 ...
- 多动手试试，其实List类型的变量在页面上取到的值可以直接赋值给一个js的Array数组变量
多动手试试,其实List类型的变量在页面上取到的值可以直接赋值给一个js的Array数组变量,并且数组变量可以直接取到每一个元素var array1 = '<%=yearList =>'; ...
- Chapter 1: A Simple Web Server
这算是一篇读书笔记,留着以后复习看看. Web Server又称为Http Server,因为它使用HTTP协议和客户端(一般是各种各样的浏览器)进行通信. 什么是HTTP协议呢? HTTP协议是基于 ...
- 从Wireshark监听的数据中提取需要的数据
最近,需要将wireshark监听的数据进行提取,分两步:首先,应该得出wireshark的数据包吧,在图形化界面中可以非常直观的将监听数据进行存储,但是这样需要手动操作非常麻烦,而且容易出错(随着处 ...
- AFNetworking实现程序重新启动时的断点续传
今天需要用AFNetworking实现断点续传的功能,但是在进行了一番研究之后,发现AFNetworking虽然支持下载文件的暂停和继续,但是程序重新启动后再次下载无法进行续传.网上有说可以通过AFD ...
- 数据结构《9》----Threaded Binary Tree 线索二叉树
对于任意一棵节点数为 n 的二叉树,NULL 指针的数目为 n+1 , 线索树就是利用这些 "浪费" 了的指针的数据结构. Definition: "A binary ...
- swift初识
介绍: Swift是苹果2014年推出的全新编程语言,它继承了C语言.ObjC的特性,且克服了C语言的兼容性问题.Swift发展过程不仅保留了Objc很多语言特性,他也借鉴了多种现代化语言的特点,在其 ...
- inno setup教程解释脚本
inno setup教程解释脚本 2007-04-08 21:31:36| 分类: 科技-> Inno Setu | 标签:inno |举报 |字号 订阅 下载LOFTER客户端 ...
- 转载：C# Word操作实现代码
转载自:http://www.jb51.net/article/17770.htm 在VS2008平台下,引用.net-Microsoft.Office.Interop.Word.12,这样就可以在程 ...
- Smart210学习记录-----中断
1. OVERVIEW OF VECTORED INTERRUPT CONTROLLER(概述向量中断控制器) 主要有4个VIC,4个TZIC还有一个很特殊的ARM PrimeCell PL192.主 ...