84669 人學習
152542 人學習
20005 人學習
5487 人學習
7821 人學習
359900 人學習
3350 人學習
180660 人學習
48569 人學習
18603 人學習
40936 人學習
1549 人學習
1183 人學習
32909 人學習
chrome 下好用就行,图片高宽固定,文字内容不固定。
怎样实现图片和文字垂直居中?怎样实现文字所有区域都有link?
光阴似箭催人老,日月如移越少年。
http://jsfiddle.net/SQS5k/7/
想要更多方案?
最近是有多少人要做垂直居中还不肯好好搜一下已有的问题……
https://dl.dropboxusercontent.com/u/17958375/work/text-vertical-align-by-img.html
<article> <p class="left"> <img src="http://ubmcmm.baidustatic.com/media/v1/0f000nYQaO_UI6DhjPksj6.png" /> </p> <p class="right"> <a href="http://blog.segmentfault.com/joyqi/1190000000407476"> <p>SegmentFault 2014年招聘第一季:</p> <p>后端开发工程师</p> </a> </p> </article> <article> <p class="left"> <img src="http://ubmcmm.baidustatic.com/media/v1/0f000nYQaO_UI6DhjPksj6.png" /> </p> <p class="right"> <a href="http://blog.segmentfault.com/joyqi/1190000000407476"> <p>SegmentFault 2014年招聘第一季:</p> <p>后端开发工程师</p> </a> </p> </article> <article> <p class="left"> <img src="http://ubmcmm.baidustatic.com/media/v1/0f000nYQaO_UI6DhjPksj6.png" /> </p> <p class="right"> <a href="http://blog.segmentfault.com/joyqi/1190000000407476"> <p>SegmentFault 2014年招聘第一季:</p> <p>后端开发工程师</p> </a> </p> </article> <style type="text/css"> article{display:block;} .left{float:left;} .right{width:800px;text-align:center;} .right:hover {background:red;cursor:pointer;} .right a{display:block;} </style> <script> window.onload = function() { var d = document, arts = d.querySelectorAll('article'); for(var i=arts.length-1; i>=0; i--) { var h = arts[i].querySelector('.left').clientHeight, r = arts[i].querySelector('.right'), a = r.querySelector('a'); r.style.height = h + 'px'; a.style.padding = (h - a.clientHeight)/2 + 'px 0'; r.onclick = function() {this.querySelector('a').click();} } } </script>
给代码给你是给你思路,不去思考一味的求代码是不会有进步的。
这里有蛮多收集的可以看看哦~http://www.cnblogs.com/rubylouvre/archive/2010/07/08/1774025.html
css文件: text-align:center
chenglin博客
http://jsfiddle.net/SQS5k/7/
想要更多方案?
最近是有多少人要做垂直居中还不肯好好搜一下已有的问题……
https://dl.dropboxusercontent.com/u/17958375/work/text-vertical-align-by-img.html
给代码给你是给你思路,不去思考一味的求代码是不会有进步的。
这里有蛮多收集的可以看看哦~
http://www.cnblogs.com/rubylouvre/archive/2010/07/08/1774025.html
css文件: text-align:center
chenglin博客