先上效果图

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <style>

        .wrap1 {

            width: 200px;

            height: 200px;

            background: red;

            line-height: 200px;

        }

        .wrap2 {

            width: 200px;

            height: 200px;

            background: blue;

            display: table-cell;

            vertical-align: middle;

        }

    </style>

</head>

<body>

    <div class="wrap1">

        wrap1中的文字.

    </div>

    <div class="wrap2">

        wrap2中的文字，wrap2中的文字，wrap2中的文字，wrap2中的文字，wrap2中的文字。

    </div>

</body>

</html>

css之div中纯文字单行和多行垂直居中的更多相关文章

  1. 在div中设置文字与内部div垂直居中

    要实现如图一所示的结果: html代码如下: <!DOCTYPE html> <html> <head lang="zh"> <meta ...

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

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

  3. CSS 之 div中文字超出时自动换行

          在开发中很容易遇到div中文字超出的问题,在此总结以下方法: 1. white-space :属性设置如何处理元素内的空白.这个属性声明建立布局过程中如何处理元素中的空白符.所有浏览器都支 ...

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

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

  5. css div中内容绝对居中（多行内容）

    div中的内容绝对居中(不适合IE6哦,IE6我已经不考虑了),直接看代码吧. <!DOCTYPE HTML> <html> <head> <title> ...

  6. div中让文字垂直居中

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

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

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

  8. 如何让div中的文字只显示一行，多余的文字隐藏并加上省略号（超链接形式）

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

  9. 纯css实现div中未知尺寸图片的垂直居中

    1.淘宝的方法 在曾经的"淘宝UED招聘"中有这样一道题目: “使用纯CSS实现未知尺寸的图片(但高宽都小于200px)在200px的正方形容器中水平和垂直居中.” 当然出题并不是 ...

随机推荐

  1. JavaScript一元运算符、二元运算符和三元运算符

    在JavaScript中,运算符可以根据其实际操作数的个数进行分类. JavaScript中的大多数运算符是一个二元运算符(binary operator),将两个表达式合并成为一个稍复杂的表达式.譬 ...

  2. 手把手教你使用Vuex（一）

    1.定义 vuex 是一个专门为vue.js应用程序开发的状态管理模式. 这个状态我们可以理解为在data中的属性,需要共享给其他组件使用的部分.也就是说,是我们需要共享的data,使用vuex进行统 ...

  3. VS2017新建MVC+ORM中的LinqDb访问数据库项目

    1.前提概述 ORM对象关系映射(Object-Relational Mapping)是一种程序技术,用于实现面向对象编程语言里不同类型系统的数据之间的转换.从效果上说,它其实是创建了一个可在编程语言 ...

  4. Dubbo 初识SPI-Version2.7.5

    1简介 SPI 全称为 Service Provider Interface,是一种服务发现机制.SPI 的本质是将接口实现类的全限定名配置在文件中,并由服务加载器读取配置文件,加载实现类.这样可以在 ...

  5. rsync未授权访问漏洞复现

    rsync未授权访问漏洞简介 rsync是Linux/Unix下的一个远程数据同步工具,可通过LAN/WAN快速同步多台主机间的文件和目录,默认运行在873端口.由于配置不当,导致任何人可未授权访问r ...

  6. 苹果电脑不安装flash的话怎么看直播

    直播这种娱乐方式的兴起,让很多游戏玩家.脱口秀演员.歌手等拥有了一个更加宽广的舞台,可以更好地展现自己的才能.大部分的直播都是采取视频影像的方式直播,只有少部分才会采用纯音频的方式. 由于很多直播网站 ...

  7. 聊聊 elasticsearch 之分词器配置 (IK+pinyin)

    系统:windows 10 elasticsearch版本:5.6.9 es分词的选择 使用es是考虑服务的性能调优,通过读写分离的方式降低频繁访问数据库的压力,至于分词的选择考虑主要是根据目前比较流 ...

  8. [C#.NET 拾遗补漏]13：动态构建LINQ查询表达式

    最近工作中遇到一个这样的需求:在某个列表查询功能中,可以选择某个数字列(如商品单价.当天销售额.当月销售额等),再选择 小于或等于 和 大于或等于 ,再填写一个待比较的数值,对数据进行查询过滤. 如果 ...

  9. C语言常用的一些转换工具函数！

    1.字符串转十六进制 代码实现: 2.十六进制转字符串 代码实现: 或者 效果:十六进制:0x13 0xAA 0x02转为字符串:"13AAA2" 3.字符串转十进制 代码实现: ...

  10. 冲刺随笔——Day_Four

    这个作业属于哪个课程 软件工程 (福州大学至诚学院 - 计算机工程系) 这个作业要求在哪里 团队作业第五次--Alpha冲刺 这个作业的目标 团队进行Alpha冲刺 作业正文 正文 其他参考文献 无 ...