学习《css世界》笔记之多行文本实现垂直居中

效果图

HTML

<div class="box"><div class="content">具有行高实现的多行文字垂直居中效果，需要属性vertical-align帮助</div>
</div>

CSS

         .box{width: 200px;line-height: 120px;background-color: #f0f0f0;}.content{display: inline-block;line-height: 20px;margin: 0 20px;vertical-align: middle;}

ps：由于vertical-align原因，此方式是近似垂直居中，不是绝对

学习《css世界》笔记之多行文本实现垂直居中相关推荐

皮卡皮卡：学习CSS的笔记
1.CSS简介 CSS,指的是Cascading Style Sheet(层叠样式表). 2.CSS的引入方式 1)外部样式表(link): <link rel=" ...
学习笔记——css世界
流 "流"又叫文档流,是css的一种基本定位和布局机制.流是html的一种抽象概念,暗喻这种排列布局方式好像水流一样自然自动."流体布局"是html默认的布局机 ...
《CSS 世界》读书笔记-流与宽高
大厂技术坚持周更精选好文 1. 前言在学习 CSS 的过程中,我经常会被数不清的属性和特性弄得晕头转向.作为前端新手,经常会坐在显示器前花很多很多时间去 "追" 视觉稿, ...
《CSS世界》读书笔记：line-height
line-height 1. 行距与半行距 2. 半行距与精确的布局 3. 为什么line-height可以让内联元素"垂直居中"? 4. 使用line-height实现多行文本& ...
《CSS世界》笔记二：盒模型四大家族
上一篇:<CSS世界>笔记一:流/元素/尺寸下一篇:<CSS世界>笔记三:内联元素与对齐写在前面在读<CSS世界>第四章之前,粗浅的认为盒模型无非是margi ...
《CSS世界》读书笔记（十一）
激进的margin属性 margin与元素尺寸以及相关布局元素尺寸 border box尺寸,对应jQuery中的$().outerWidth()和$().outerHeight()方法,在原生DO ...
《学习CSS布局》学习笔记
近几天做了一个小的企业展示网站.虽然页面是在模板的基础上改的,但改的多了不熟悉CSS也很麻烦.正好我看到了学习CSS布局这个网站,于是补习了一下CSS知识. CSS的显示 CSS的元素分为两类:块级元 ...
《CSS世界》读书笔记（九）
 content内容生成技术 1. content 辅助元素生成清除浮动: .clear:after {content: '';dis ...
层叠上下文-《CSS 世界》阅读笔记
层叠规则目录层叠规则目录 z-index 什么是层叠上下文什么是层叠水平层叠顺序层叠准则层叠上下文的特性笔者个人理解层叠上下文的创建定位元素与传统层叠上下文层叠上下文与层叠顺序 ...

学习《css世界》笔记之多行文本实现垂直居中

学习《css世界》笔记之多行文本实现垂直居中相关推荐

最新文章

热门文章