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的正方形容器中水平和垂直居中.” 当然出题并不是 ...
随机推荐
- 对accuracy、precision、recall、F1-score、ROC-AUC、PRC-AUC的一些理解
最近做了一些分类模型,所以打算对分类模型常用的评价指标做一些记录,说一下自己的理解.使用何种评价指标,完全取决于应用场景及数据分析人员关注点,不同评价指标之间并没有优劣之分,只是各指标侧重反映的信息不 ...
- menuconfig
1. menuconfig 的存在意义 原由是 项目的 config 项太多了,需要一个人性化的方式设置. menuconfig 背后是一个应用程序,用户和该应用程序交互,完成 config 设置. ...
- linux文件cat/tac/more/less/head/tail/find/vimdiff
ls查看目录文件里的文件: [root@localhost test]# ls a aa b c -d选项查看目录文件自身信息: [root@localhost test]# ll -d drw ...
- asyncio多进程+pyppeteer浏览器控制+pyquery解析实现爬虫demo
import asyncio from pyppeteer import launch from pyquery import PyQuery as pq async def main(): brow ...
- Django 配置 Mysql
先安装mysqlclient pip install mysqlclient sttings中的 DATABASES = { 'default': { 'ENGINE': 'django.db.bac ...
- spring boot配置MySQL8.0 Druid数据源
创建spring boot项目,在pom中添加相应依赖 <!--web--> <dependency> <groupId>org.springframework.b ...
- Monitor的扩展支持string的超时锁
对Monitor的使用可以防止lock的时间过长并且可以设置其对应的超时时间达到对预期代码的一个控制,合理的使用timeout可以有助于程序的健壮性.但是对于不同的并发程序可能某些时候我们需要的粒度是 ...
- 5G革命：如何让「数据」实现最大性能？
壹 早在2000年代中期,H-Store第一次在M.I.T.被我们提出来,VoltDB是H-Store的商业化产品,它表示结构相似的数据会被连续存放到一起.在本文的后续描述中,我们将使用V-H来缩写. ...
- MindManager主题标记功能怎么使用
我们在使用MindManager制作思维导图的过程中,经常需要对主题的类别,优先程度等进行整理,毫无疑问,这是一项繁琐却又不得不做的工作.今天小编为大家带来了MindManager主题整理的一些小技巧 ...
- 【Camtasia教学】如何添加光标效果
随着网络技术的快速发展,手机等移动工具越来越普及,我们的生活也发生了很大的变化,例如我们以前必须去到学校才能学习知识,但是现在躺在床上都可以看国外的教学视频.所以在网上录制教学或者演示视频变得越来越常 ...