Month: January 2014

对于图片如和在div中上下居中的问题困扰了偶很多年，今天终于狠下心来把它彻底搞定（实际上是因为Mackes不是专业前端，所以很少用到，经常忘记，网上有没个我喜欢的）。 在网上你会看到有用三层div通过浮动居中的，也有直接写了个dislay:table-cell;的。要么太复杂，要么没有全部适应。 下面我来讲解一下我的方法。 大家知道，在table中 只要在td上设置了 vertical-align:middle;就可以做到这一点。可是div中不行。这到底是为什么呢？ 也许大家都知道table被div淘汰的原因，是因为table自带的一些样式太庞大了，页面加载的同时会同步加载样式，导致table布局的页面加载很慢。而div则只只带了一个很简单样式 display:block;。其他的样式是可以通过css样式异步加载的。 OK，因为在table中实现了我们想要的效果，那么我们可以先写个简单的table来看看这个时候table用了哪些样式使得图片可以上下居中。 然后，我用了谷歌浏览器来查看“审查元素”，有些说我用firebug可以不？答案是NO。因为谷歌浏览器的“审查元素”功能会把元素的默认样式也说明的很清楚，但是你用firebug就只能看到自己定义的，而不能看到元素的默认样式。 通过查看发现<tr>中有一个display:table-row;样式，之前我一直以为它的默认样式是display:table-column;，那会不会就是这个table-row;起的作用呢？因为网上有人用table-cell;。Just try it ！ <div id="tr" style="display:table-row;height:100px;"> <div id="td" style="display:table-cell; vertical-align:middle;"><img src="your-image-url.gif"/></div> </div> Ok ！That all ！ 测试成功了，哈哈！ 原来就这么简单。 在网上你会看到 只用了talbe-cell，这个样式是table中最小单位的样式，你可以理解成 table中的td。可以在“审查元素”时发现<td>中默认就有这个样式，而<tr>中有 table-row 这个样式。table-row 就像是table中的tr一样控制了整行样式，可以联想到：行、行高；对就是跟高度有关。 所以说：以上的两个div 就像当于是table中的tr和td（看示例代码中的ID值）。但是没有用到table的庞大样式，而且我们所用的是div，所以不会对加载速度产生影响。 如果你想同时左右居中，那就用text-align:center;就可以了（这个其实不需要说明大家都知道）。 同样的像table一样，如果是多个这样的div就只要这样写： <div id="tr" style="display:table-row; height:100px;"> <div id="td" style="display:table-cell; vertical-align:middle;"><img src="your-image-url.gif"/></div> <div id="td1" style="display:table-cell; vertical-align:middle;"><img src="your-image-url.gif"/></div> <div id="td2" style="display:table-cell; vertical-align:middle;"><img src="your-image-url.gif"/></div> <div id="td3"…