中心图像与我的文字在一边

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;
}

Answer 2

您可以使用vertical-align: middle

实现这一目标

HTML：

<p>
    Text <img src="img.png" />
</p>

CSS：

img {
    vertical-align: middle;
}

演示：http://jsfiddle.net/KSWef/2/

Answer 3

检查此 Demo jsFiddle

您应该非常轻松地完成：将 vertical-align CSS应用于图片。

CSS

img{
    vertical-align:middle; 
}

Answer 4

首先，HTML标记不合适，

1）您尚未正确关闭图像标签。

2）末尾的<a>标签未正确关闭。

3）在管理代码时，内联css是邪恶的（关注点分离很重要）

现在关于解决方案：

  p {
  display : table;
}

p span {
  display: table-cell;
  vertical-align: middle;
}
span .image  {
  display: table;
}

HTML ：

    <p>

  <span>&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;
   </span>
 <span> <a id="facebook" class="image" href="#"><img src="http://www.picturesnew.com/media/images/images-photo.jpg" style="width: 200px;"></a>
  <a href="#" class="image" ><img src="http://www.picturesnew.com/media/images/images-photo.jpg" style="width: 200px;"></span>
   </p> 

Answer 5

如果您的图片和文字位于同一元素中，请将文字的line-height: XXpx;设置为图像高度。

Answer 6

为了更简单，您可以使用表格：

<table border="0" cellspacing="0" cellpadding="0">
  <tr>
    <th rowspan="3" >text </th>
    <th >image</th>
  </tr>
  <tr>
    <td>image</td>
  </tr>
  <tr>
    <td>image</td>
  </tr>
</table>