chrome 下好用就行,图片高宽固定,文字内容不固定。
怎样实现图片和文字垂直居中?怎样实现文字所有区域都有link?
光阴似箭催人老,日月如移越少年。
http://jsfiddle.net/SQS5k/7/
Want more solutions?
Recently, how many people want to do vertical centering but are unwilling to search for existing problems...
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>
Giving you code gives you ideas. Just looking for code without thinking about it will not make progress.
There are quite a lot of collections here to look at~http://www.cnblogs.com/rubylouvre/archive/2010/07/08/1774025.html
css file: text-align:center
chenglin blog
http://jsfiddle.net/SQS5k/7/
Want more solutions?
Recently, how many people want to do vertical centering but are unwilling to search for existing problems...
https://dl.dropboxusercontent.com/u/17958375/work/text-vertical-align-by-img.html
Giving you code gives you ideas. Just looking for code without thinking about it will not make progress.
There are quite a lot of collections here to look at~
http://www.cnblogs.com/rubylouvre/archive/2010/07/08/1774025.html
css file: text-align:center
chenglin blog