前端技巧集：图与表三步垂直居中

目标

一个图片img和一个表格table，并且图片与表格共享一行。

实现

1. 在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当中有许多的属性，用于其他各种场景。童鞋可先行尝试，请静待下回分解。