html - 居中图像，我的文字在旁边

Question

如何让文字位于图片中间？

          |image1| |Image2|
text blah |  X   | |  x   |
          |  X   | |  x   |

代码:

<p style="color:white;">
    &copy;<% = year(now())%> company.CoZa | 
    <a href="http://www.company.com">House</a> powered by 
    <a href="http://www.company2.net">Company</a>&nbsp;&nbsp;&nbsp;&nbsp;
    <a id="facebook" href="#"><img src="images/facebook.png"</a>
    <a id="youtube" href="#"><img src="images/youtube.png"</a>
</p> 

Answer 1

只需添加:

img{    
    vertical-align:middle;
}

Demo Fiddle

或者，如果您有多个垂直显示的图像 - 您可以使用 CSS 表格

Demo Fiddle

HTML

<div class='table'>
    <div class='cell'>text text text</div>
    <div class='cell'>
        <img src='http://developers.blog.box.com/wp-content/uploads/2013/01/thumbnail-sample.png' />
        <br />
        <img src='http://developers.blog.box.com/wp-content/uploads/2013/01/thumbnail-sample.png' />
    </div>
</div>

CSS

.table {
    display:table;
    width:100%;
}
.cell {
    display:table-cell;
    vertical-align:middle;
}
img {
    vertical-align:middle;
}