先上效果图

<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. [MIT6.006] 4. Heaps and Heap Sort 堆，堆排序

    第4节课仍然是讲排序,但介绍的是一种很高效的堆排序. 在编程过程中,有时候会需要进行extrat_max的操作,即从一个数列里挨个抽取最大值并将其它从原数列中移除.而排序问题也可以看作是一个extra ...

  2. 【Flutter 1-7】Flutter教程Dart语言——变量

    作者 | 弗拉德 来源 | 弗拉德(公众号:fulade_me) 2011年10月10日的GOTO大会上,谷歌的两位工程师发布了"Dart":Dart是一种全新的编程语言,旨在帮助 ...

  3. 加解密 C语言实现

    1.加密的基本原理 加密分为对称加密和非对称加密,对称加密就是加密方和解密放用同一个密钥. 加密是分组加密,即将明文数据分成多个密钥大小的块,依次和密钥运算,输出密文. padding,由于加密需要分 ...

  4. 使用ViewPager实现卡片叠加效果

    使用ViewPager实现卡片叠加效果 背景 在开发项目时,需要对 App的某个资源模块进行界面重构,其中在资源展示部分中新的交互以卡片叠加的效果替代了原来的资源组织树门禁展示方式.在新的资源展示方式 ...

  5. C++中内存布局 以及自由存储区和堆的理解

    文章搬运自https://www.cnblogs.com/QG-whz/p/5060894.html,如有侵权请告知删除 当我问你C++的内存布局时,你大概会回答: "在C++中,内存区分为 ...

  6. java~通过springloaded实现热部署

    之前写过使用自定义的classLoader进行动态加载,热部署:它有很多弊端,我总结一下: 当前项目不能引用第三方包 当前项目必须使用反射的方式调用第三方包的方法 写死的一些路径 springload ...

  7. [从源码学设计]蚂蚁金服SOFARegistry之网络封装和操作

    [从源码学设计]蚂蚁金服SOFARegistry之网络封装和操作 目录 [从源码学设计]蚂蚁金服SOFARegistry之网络封装和操作 0x00 摘要 0x01 业务领域 1.1 SOFARegis ...

  8. FL Studio中如何进行工具栏编辑

    菜单工具栏是我们使用FL Studio时经常需要使用的一个功能,那么,除了软件默认的菜单工具栏,我们应该如何编辑菜单工具栏呢? 图1:工具栏编辑 想要编辑更改默认菜单栏,我们只需要鼠标右键单击菜单工具 ...

  9. 如何用EasyRecovery恢复U盘乱码的文件

    大多数用户在遇到U盘文件乱码的情况时,都显得有点手足无措,甚至会删除乱码文件,这样就导致了乱码文件数据的丢失.针对这种情况,我们应该怎么正确处理呢? 图1:U盘乱码 U盘文件乱码原因: 想要解决问题, ...

  10. maven打包时报No compiler is provided in this environment处理

    系统:macOS 开发工具:Idea 问题描述:在idea中执行mvn clean install时报No compiler is provided in this environment. Perh ...