css - 怎样实现图片和文字垂直居中
大家讲道理
大家讲道理 2017-04-17 11:08:28
0
4
935

chrome 下好用就行,图片高宽固定,文字内容不固定。

怎样实现图片和文字垂直居中?怎样实现文字所有区域都有link?

大家讲道理
大家讲道理

光阴似箭催人老,日月如移越少年。

reply all(4)
刘奇

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.

PHPzhong

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

Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template