css之div中纯文字单行和多行垂直居中
先上效果图
<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中纯文字单行和多行垂直居中的更多相关文章
- 在div中设置文字与内部div垂直居中
要实现如图一所示的结果: html代码如下: <!DOCTYPE html> <html> <head lang="zh"> <meta ...
- 实现全屏轮播，并且轮播div中的文字盒子一直自动垂直居中
效果如下: 直接上代码了: 说明:轮播图基于swiper.js,自行下载.css在最后 <!DOCTYPE html> <html lang="en"> & ...
- CSS 之 div中文字超出时自动换行
在开发中很容易遇到div中文字超出的问题,在此总结以下方法: 1. white-space :属性设置如何处理元素内的空白.这个属性声明建立布局过程中如何处理元素中的空白符.所有浏览器都支 ...
- 禁止鼠标多次点击选中div中的文字
<!DOCTYPE html><html><head><meta charset="utf-8"><title>Fire ...
- css div中内容绝对居中（多行内容）
div中的内容绝对居中(不适合IE6哦,IE6我已经不考虑了),直接看代码吧. <!DOCTYPE HTML> <html> <head> <title> ...
- div中让文字垂直居中
在div中如何让文字垂直居中? 作者在刚接触web前端开发时就遇到了这个问题,一直没有记录下来,今天正好有空,便记录下来. 为了方便展示,我把style先直接写在了div里. 效果如下图所示: 图1. ...
- JavaScript设置div中的文字滚动起来 实现滚动效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 如何让div中的文字只显示一行，多余的文字隐藏并加上省略号（超链接形式）
写页面的时候遇到了一个小小的问题,如何让div中一行超链接文字只显示一行,多余的文字隐藏并加上省略号,悬浮时隐藏的文字显示出来?解决问题时发现了css3的一个新标签 text-overflow , ...
- 纯css实现div中未知尺寸图片的垂直居中
1.淘宝的方法 在曾经的"淘宝UED招聘"中有这样一道题目: “使用纯CSS实现未知尺寸的图片(但高宽都小于200px)在200px的正方形容器中水平和垂直居中.” 当然出题并不是 ...
随机推荐
- Docker - 解决运行容器报 WARNING: IPv4 forwarding is disabled. Networking will not work. 的问题
问题背景 执行运行容器的命令 docker run -d -uroot -p 8080:8080 --name jenkins2 -v /var/jenkins_node/:/var/jenkins_ ...
- 关于多线程--网络编程 -- 注解反射的一点笔记（JAVA篇）
一 . 线程 java开启一个线程的方法(三种) 方法一:继承Thread类并New一个线程对象 步骤: 1):定义一个类A继承于Java.lang.Thread类. class TestThread ...
- React native路由跳转navigate、push、replace的区别
由于没有系统的去学习RN,对路由跳转了解不多,只是跟着项目在做,抽点时间简单学习一下RN路由跳转方法区别,总结如下: 如上图,外部是一个栈容器,此时A页面在最底部,navigate到B页面,为什么此时 ...
- flink1.10版本StreamGraph生成过程分析
1.StreamGraph本质 本质就是按照用程序代码的执行顺序构建出来的用于向执行环境传输的流式图,并且可以支持可视化展示给用户的一种数据结构. 2.StreamGraph.StreamNode和S ...
- LeetCode 中等题解（2）
31 下一个排列 Question 实现获取下一个排列的函数,算法需要将给定数字序列重新排列成字典序中下一个更大的排列. 如果不存在下一个更大的排列,则将数字重新排列成最小的排列(即升序排列). 必须 ...
- Linux内核剖析——操作系统的启动
一.总体功能 1.从通电到BIOS跳转 1.1 CPU在通电后,先进入实模式,设置CS=0XFFFF,IP = 0X0000(指向BIOS) 1.2 BIOS进行执行系统监测,并且在地址=0处初始化中 ...
- [原题复现+审计][RoarCTF 2019]Easy Calc(http协议走私、php字符串解析漏洞)
简介 原题复现: 考察知识点:http协议走私.php字符串解析漏洞 线上平台:https://buuoj.cn(北京联合大学公开的CTF平台) 榆林学院内可使用信安协会内部的CTF训练平台找到 ...
- python-基础入门-7基础
1.语法和语句 Python中有一些基本规则和特殊字符 1)#符号之后的表示注释 2)\n符号表示换行 3)\继续上一行的内容 推荐使用括号,这样可读性更好 4):将两个语句链接在一行中 类似于c语言 ...
- 查看mongodb状态
netstat -ntlp|grep 27017
- 使用SpringBoot进行优雅的数据验证
JSR-303 规范 在程序进行数据处理之前,对数据进行准确性校验是我们必须要考虑的事情.尽早发现数据错误,不仅可以防止错误向核心业务逻辑蔓延,而且这种错误非常明显,容易发现解决. JSR303 规范 ...