之前用line-height一直都是为了让文字居中，今天又重新学习了一下。line-height，故名思议：行高。设置行高会影响行框，行框就是line-height减去font-size的值平均分配到文字的顶部和底部，这就是为什么设置line-height与height相同的时候，就垂直居中的原因。...
分类：
Web程序 时间：
2014-07-22 22:55:15
阅读次数：
223
一、单行内容的居中只考虑单行是最简单的，无论是否给容器固定高度，只要给容器设置line-height和height，并使两值相等，再加上over-flow: hidden就可以了.middle-demo-1{height: 4em;line-height: 4em;overflow: hidden;...
分类：
Web程序 时间：
2014-07-16 23:10:39
阅读次数：
254
相信很多前端开发人员都曾遇到过需要将图片设置为垂直居中对齐的经历，我刚好在之前的一个项目刚刚解决了这个问题，使用的方法非常简单，兼容性也很好。具体做法如下：1、只需要兼容各大现代浏览器：父元素{ display:teble-cell; width:Npx; height:Npx; verti...
分类：
Web程序 时间：
2014-07-16 19:55:26
阅读次数：
169
.box{ width: 100px; height: 100px; border: 1px solid #ccc; border-radius: 5px; margin-bottom: 15px; } .out, ...
分类：
Web程序 时间：
2014-07-14 00:16:57
阅读次数：
305
宽度高度不固定的div如何水平居中与垂直居中很多新手在写css的时候经常遇到的一个问题，当div没有固定的宽度或者高度的时候，如何才能让div水平或者垂直居中显示。如果div有固定宽度的话，用padding，margin都很容易实现。方法有很多种。不过经常遇到这种div没有固定的宽度高度的情况，我们...
分类：
其他好文 时间：
2014-07-12 13:56:37
阅读次数：
129
虽然Div布局已经基本上取代了表格布局，但表格布局和Div布局仍然各有千秋，互有长处。比如表格布局中的垂直居中就是Div布局的一大弱项，不过好在千变万化的CSS可以灵活运用，可以制作出准垂直居中效果，勉强过关。 要让div中的内容垂直居中，无非有以下几种方法，等我一一列举：一、行高（line-hei...
分类：
其他好文 时间：
2014-07-09 16:53:53
阅读次数：
165
英文原版链接：http://codepen.io/shshaw/full/gEiDt我们都知道margin:0 auto;的样式能让元素水平居中，而margin: auto;却不能做到垂直居中……直到现在。但是，请注意！想让元素绝对居中，只需要声明元素高度，并且附加以下样式，就可以做到：12345....
分类：
Web程序 时间：
2014-07-08 00:35:55
阅读次数：
327
众所周知，在Firefox下input type=”button”的文字是不好居中的，原因在于Firefox自己比较二，弄了个私有属性，导致以下问题的出现：按钮左右本身有2px的间距（FF私有属性写了padding:0 2px所致）；按钮文字居中是不行的（此时设置padding-bottom是没用的...
分类：
其他好文 时间：
2014-07-07 00:50:33
阅读次数：
256
我们知道select标签在各个浏览器中的属性和各浏览器的支持各有些不同，从而造成select选择框在各浏览器的显示有不同，下面我们通过对主要 外形CSS属性的支持，打造全兼容select。 我对select的height、padding、line-height分别利用控制变量的方法写了个DEMO在各...
分类：
其他好文 时间：
2014-07-05 19:03:04
阅读次数：
200
#移动前端webApp开发点滴积累20140629##关于input行内居中的问题给input设定一个比较高的高度，在某些版本的移动设备上，文字不能垂直居中，即使设定了相同的行高也不行。（见图）