line-height 垂直居中

1、单行文字的垂直居中对齐

把line-height值设置为height一样大小的值可以实现单行文字的垂直居中。这句话确实是正确的，但其实也是有问题的。问题在于height，看我的表述：“把line-height设置为您需要的box的大小可以实现单行文字的垂直居中”，差别在于我把height去掉了，这个height是多余的.

2、多行文字的垂直居中

实现的关键是把文字当图片处理。用一个span标签将所有的文字封装起来，设置文字与图片相同的display属性（inline-block属性），然后用处理图片垂直居中的方式处理文字的垂直居中即可。

3、图片的垂直居中

时间： 2024-08-26 15:49:20

line-height 垂直居中的相关文章

line height 与 vertical align

一.line height 其中代表inline box(包含上下间距,若height==line-height,则行间距=line-height - font-size/2),big代表content area. 注: 若line-height < content area ,则line box要取line-height的值,这也是为什么会重叠的原因. line-height属性取值: 1. % 若自身没有设置line-height,则line-height = 父元素的font-size *

深入了解css的行高Line Height属性

来源:http://www.cnblogs.com/fengzheng126/archive/2012/05/18/2507632.html 什么是行间距? 古时候我们使用印刷机来出来文字.印刷出来的每个字,都位于独立的一个块中. 行间距,即传说中控制两行文字垂直距离的东东.在CSS中,line-height被用来控制行与行之间垂直距离. 不过,行间距与半行间距,还是取决于CSS中的line-height.那么,如何来使用line-height呢? 默认状态,浏览器使用1.0-1.2 line-

css实现水平居中和垂直居中的常见方式

我们在实际工作中常会遇到需要设置居中的场景,居中分为水平居中和垂直居中.针对不同的情况又有不同的实现方式,例如行内元素和块状元素. 水平居中: 行内元素:text-align:center://这个比较简单 块状元素:定宽的块状元素通过设置左右margin为auto实现,例如margin:10px auto:不定宽的块状元素:加入 table 标签后按照定宽元素进行设置:设置 display: inline 后按照行内元素设置:设置position:relative left:50% 通过给父元

line-height系列——定义和工作原理总结

一.line-height的定义和工作原理总结 line-height的属性值: normal    默认  设置合理的行间距. number  设置数字,此数字会与当前的字体尺寸相乘来设置行间距line-height:1.5; length    设置固定的行间距.  例如:line-height:18px; %          基于当前字体尺寸的百分比行间距. 例如:line-height:150%; line-height 的定义: 首先认识下文字的四条线 从上到下四条线分别是顶线.中线

自适应居中

一.窗体居中 1 position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; /*height: 50px; width: 165px; */ 简析: position:固定位置显示(absolute|fixed): [absolute:窗口大小由上层position为absolute.fixed.relative的子父关系窗口决定:fixed:窗口大小由上层层position为fixed的子父关系窗口决定] t

web前端基础篇⑧

1.伪类选择器 都以冒号开始.:focus 焦点的地方加样式:first-child 向元素的第一个子元素添加样式锚伪类:a:link {color:red} 未访问的链接 a:visited {color:yellow} 已访问的链接a:hover {color:green} 将鼠标放在链接上a:active {color:blue} 按住链接的时候hover必须放在link和visited后,才有效.active必须放在hover之后,才有效.2.伪元素选择器 也以冒号开始.:first-l

【翻译】关于vertical-align所有你需要知道的

本文是翻译过来的,如果有不对的地方还请指教~,原文链接:Vertical-Align: All You Need To Know 前面一些说明,可以略过不看吧 我经常需要对元素进行垂直方向上的布局. CSS提供了一些方法来实现这个功能,比如float,position: absolute,手动地增加margin或padding. 我并不是很喜欢这些方法.Floats只能让元素在顶端布局,而且需要手动清除浮动.absolute定位让元素离开文档流,且不再影响它的周围环境.利用固定的margigin

web前端【第四篇】CSS属性操作

一.文本属性 1.text-align:cnter 文本居中2.line heigth 垂直居中 :行高,和高度对应3.设置图片与文本的距离:vertical-align4.text-decoration:none 去掉超链接下划线5.要是给a标签修改颜色的时候,就定到a标签上,用继承有时候是搞不定的因为继承的级别是很低的,如果a标签设置了样式,是不会继承父亲的6.首行缩进:text-indent:30px7.font-style:oblique 或者italic....(设置字体的样式为斜体)

css属性中常见的操作方法

css样式之属性操作 一.文本属性 1.text-align:cnter 文本居中2.line heigth 垂直居中 :行高,和高度对应3.设置图片与文本的距离:vertical-align4.text-decoration:none 去掉超链接下划线5.要是给a标签修改颜色的时候,就定到a标签上,用继承有时候是搞不定的因为继承的级别是很低的,如果a标签设置了样式,是不会继承父亲的6.首行缩进:text-indent:30px7.font-style:oblique 或者italic....(

浅谈IFC

IFC布局规则: 在一个行内格式化上下文中,盒是一个接一个水平放置的,从包含块的顶部开始 这些盒之间的水平margin,border和padding都有效 盒可能以不同的方式竖直对齐:以它们的底部或者顶部对齐,或者以它们里面的文本的基线对齐 行盒(line box) 包含来自同一行的盒的矩形区域叫做行盒(line box) line box的宽度由包含块和float情况决定,一般来说,line box的宽度等于包含块两边之间的宽度,然而float可以插入到包含块和行盒边之间,如果有float,那