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的正方形容器中水平和垂直居中.” 当然出题并不是 ...
随机推荐
- kafak ack应答机制
ack 应答机制 对于某些不太重要的数据,对数据的可靠性要求不是很高,能够容忍数据的少量丢失, 所以没必要等 ISR 中的 follower 全部接收成功. 所以 Kafka 为用户提供了三种可靠性级 ...
- OLTP与OLAP分析与比较
(本文转载自Super_Mu的博客https://www.cnblogs.com/hhandbibi/p/7118740.html) 1.OLTP与OLAP的介绍 数据处理大致可以分成两大类:联机事务 ...
- centos6安装calamari
安装操作系统 首先安装操作系统centos6,安装过程选择的是base server,这个不相同不要紧,出现缺少包的时候去iso找出来安装就可以了 calamari的简单介绍 首先简单的介绍下cala ...
- SQL Server 常用近百条SQL语句（收藏版）
1. sqlserver查看实例级别的信息,使用SERVERPROPERTY函数 select SERVERPROPERTY ('propertyname') 2. 查看实例级别的某个参数XX的配置 ...
- Elementary OS安装及开发环境配置（一）
前言 假期在家无聊,刚好把六年前的一台笔记本电脑利用起来,原来电脑虽然说配置说不上古董机器,但是运行win系统感觉还是不流畅,所幸给换成Linux桌面版系统,在网上查阅了很多,Linux桌面系统要么推 ...
- Android10_原理机制系列_Binder机制
前言 Binder 从java到c++到kernel,涉及的内容很多,很难在一篇文章中说清楚.这篇主要是自我记录,方便后续查询并拆分总结的. 因为涉及的的确非常多,不能面面俱到,所以可能一些地方感觉比 ...
- wget 快速下载 ftp 文件
GNU Wget 1.17.1,非交互式的网络文件下载工具. 用法: wget [选项]... [URL]... 长选项所必须的参数在使用短选项时也是必须的. 启动: -V, --version 显示 ...
- 聊聊 elasticsearch 之分词器配置 (IK+pinyin)
系统:windows 10 elasticsearch版本:5.6.9 es分词的选择 使用es是考虑服务的性能调优,通过读写分离的方式降低频繁访问数据库的压力,至于分词的选择考虑主要是根据目前比较流 ...
- 适合 Java 新手的开源项目集合——在 GitHub 学编程
作者:HelloGitHub--老荀 当今互联网份额最大的编程语言是哪一个?是 Java!这两年一直有听说 Java 要不行了.在走下坡路了.没错,Java 的确在走下坡路,未来的事情的确不好说,但是 ...
- Nginx搭建文件共享服务器
前言 Nginx除了做正反向代理和负载均衡,还能做动静分离服务器,如此便可以当作文件共享服务器使用. 环境 WIN 10 Vmware Workstation 15 Player CentOS Lin ...