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的正方形容器中水平和垂直居中.” 当然出题并不是 ...
随机推荐
- Socket 连接错误及原因
ECONNABORTED 该错误被描述为"software caused connection abort",即"软件引起的连接中止".原因在于当服务和客户 ...
- shell编程之输入输出
1.输入 read命令有以下几种常见形式: read var :等待用户输入,从标准输入中读取一行并赋值给变量var read : 标准输入读取一行,并赋值给内置变量REPLY read -a a ...
- redis乐观锁
乐观锁(又名乐观并发控制,Optimistic Concurrency Control,缩写"OCC"),是一种并发控制的方法.它假设多用户并发的事务在处理时不会彼此互相影响,各事 ...
- java的for循环中遇到异常抛出后继续循环执行
@Testpublic void loopTryCatchTest() throws Exception { Map<String, Object> a = new HashMap(); ...
- 一次webpack小规模优化经历
这标题一点营销号味道都没有,怎么会有人看啊!(笑) 没人看也无所谓的文章背景: 八月份入职了新公司,是个好几年的老项目了,公司产品是存在很久了,但我接触到的代码版本保守估计应该是有个三年到四年这样的历 ...
- 搭建zookeeper集群（伪集群）
jdk环境 上传zk压缩包 解压缩 复制三份 mkdir /usr/local/zk_cluster cp -r zookeeper-3.4.6 /usr/local/zk_cluster/zooke ...
- java开发两年，连Spring中bean的装配都不知道？你怎么涨薪啊
Spring 1.1.1.1 创建一个bean package com.zt.spring; public class MyBean { private String userName; privat ...
- 关于Folx一些使用方面的问题详细解答
Folx作为一款的专业的Mac系统文件下载工具,相信大家或多或少都对它的主打功能,如智能限速.制定计划任务.直链文件下载等功能有所了解,但是对于它的一些相对少见.冷门的功能,却不太熟悉. 下面小编将通 ...
- 文件误删了怎么办，EasyRecovery来帮忙
哈喽大家好!又到了年底冲业绩的时候了,每逢这个时候,收拾自己的电脑就和收拾放假一样,令人头秃,不是这个文件丢了,就是那个数据没了,不管您是为论文头秃发愁的学生,还是朝九晚五的上班族,又或者是日进斗金的 ...
- VueCli 4.0+ 版本安装插件与VueCLI 旧版本的不同
通过VueCli 脚手架 4+ 版本创建的项目,在引入插件文件并配置时,是通过 import {Create* } ,旧版本是直接导入全部,在配置相应的文件时,重新new 一个:然后再通过Vue 进行 ...