目标
一个图片img和一个表格table，并且图片与表格共享一行。
实现
1. 在HTML中加上一个图片和表格
代码中写两个元素：图片与表格，为了观察方便给他们加上个红色边框。
代码如下：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>进击的DOCTYPE</title>
<style>
table,img {
border: 1px solid red;
}
</style>
</head>
<body>
<div>
<img src="img/会飞的图片.jpg">
<table>
<tr>
<td>单元格</td>
<td>单元格</td>
<td>单元格</td>
<td>单元格</td>
<td>单元格</td>
</tr>
<tr>
<td>单元格</td>
<td>单元格</td>
<td>单元格</td>
<td>单元格</td>
<td>单元格</td>
</tr>
<tr>
<td>单元格</td>
<td>单元格</td>
<td>单元格</td>
<td>单元格</td>
<td>单元格</td>
</tr>
</table>
</div>
</body>
</html>
在Chrome显示结果如下：
1.png
2. 把图片和表格放到一行中
因为table是个块元素是独占一行的，所以，把table的CSSdisplay属性改为inline-block就好了，代码如下：
table {
display : inline-block;
}
效果变成如下：
2.png
虽然结果有些奇怪，但是还是在一行了。
3. 让图片与表格垂直居中
给图片加上vertical-align : middle属性，图片和表格垂直对齐居中了。
img {
vertical-align : middle;
}
效果见下图：
3.png
拓展
垂直居中是常用对齐方式，这里使用了vertical-align属性。不只是表格，只要是display为inline-block的标签就可以，vertical-align当中有许多的属性，用于其他各种场景。童鞋可先行尝试，请静待下回分解。
