要实现如图一所示的结果:

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垂直居中的更多相关文章

  1. 实现全屏轮播,并且轮播div中的文字盒子一直自动垂直居中

    效果如下: 直接上代码了: 说明:轮播图基于swiper.js,自行下载.css在最后 <!DOCTYPE html> <html lang="en"> & ...

  2. div中单行文字垂直水平居中

    1.div中单行文字垂直水平居中.条件:外层div高度已经给定.代码如下: 复制代码代码如下: <style type="text/css">.div3{border: ...

  3. 大div中,三个小div水平居中

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. JavaScript设置div中的文字滚动起来 实现滚动效果

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. 禁止鼠标多次点击选中div中的文字

    <!DOCTYPE html><html><head><meta charset="utf-8"><title>Fire ...

  6. div中让文字垂直居中

    在div中如何让文字垂直居中? 作者在刚接触web前端开发时就遇到了这个问题,一直没有记录下来,今天正好有空,便记录下来. 为了方便展示,我把style先直接写在了div里. 效果如下图所示: 图1. ...

  7. 如何让div中的文字只显示一行,多余的文字隐藏并加上省略号(超链接形式)

    写页面的时候遇到了一个小小的问题,如何让div中一行超链接文字只显示一行,多余的文字隐藏并加上省略号,悬浮时隐藏的文字显示出来?解决问题时发现了css3的一个新标签  text-overflow  , ...

  8. css之div中纯文字单行和多行垂直居中

    先上效果图 <html lang="en"> <head> <meta charset="UTF-8"> <meta ...

  9. div中设置滚动条的问题

    <div srtle="width:100px;height:50px;"></div> 这样的一个div,当文本超出的时候我们就会设: overflow: ...

随机推荐

  1. 实用的WPF Xml的简易读写类以及用法示例

    转自:http://www.silverlightchina.net/html/study/WPF/2012/0808/17980.html 最近真是写博客写的不可收拾,今天再来一篇. 因为做一些程序 ...

  2. android自学笔记一

    android是什么我自闭不必多说,我们挑精华整理 一.android体系架构: android从下而上分为四层: (1)分别是linux操作系统及驱动(C语言实现) (2)本地代码(C/C++)框架 ...

  3. GSM BTS Hacking: 利用BladeRF和开源BTS 5搭建基站

    引文 如果你已经购买了Nuand(官方)BladeRF x40,那么就可以在上面运行OpenBTS并可以输入一些指令来完成一些任务.一般来说HackRF,是一款覆盖频率最宽的SDR板卡.它几乎所有的信 ...

  4. USB peripherals can turn against their users

    Turning USB peripherals into BadUSB USB devices are connected to – and in many cases even built into ...

  5. 20145210 《Java程序设计》第08周学习总结

    第十四章 NIO与NIO2 14.1 认识NIO •NIO概述 •NIO使用频道来衔接数据结点 •在处理数据时,NIO可以让你设定缓冲区容量 •Channel架构与操作 •isOpen():确认Cha ...

  6. [转载]Magento 店铺多语言设置

    本文以扩展中文包为例: 首先进入自己 Magento 后台 系统 -> 管理商店(System -> Manage Stores) 单击 “创建店铺视图”(Create Store Vie ...

  7. magento提速的一些小技巧,列举manegnto网站提速的

    下面列举一些可以 Magneot提速 的方法 本文系宇讯原创Magento教程,转载请注明出处. 1:使用CSS /图像精灵Magento提速. 一种图像精灵放入一个单一的图像,并通过特定的CSS类调 ...

  8. Android Listener 监听的几种写法

    Android中,View的Listener方法,在是否使用匿名类匿名对象时,有各种不同的写法. OnClickListener和其他Listener方法一样,都是View类的接口,重载实现后就能使用 ...

  9. C# UdpClient 设置超时时间

    /********************************************************************** * C# UdpClient 设置超时时间 * 说明: ...

  10. 帝国cms 灵动标签

    [e:loop={栏目ID/专题ID,显示条数,操作类型,只显示有标题图片,附加SQL条件,显示排序}] <a href="<?=$bqsr[titleurl]?>&quo ...