难用的vertical-align

如上图美工给的尺寸相同的图片，但是有的却显示在了用css做的圆圈的外面了！！

怎么解决？

首先想到的就是给图片加个css样式vertical-align：middle。

然而问题并没有解决此样式不管用！查了很多资料发现vertical-align需要和display：table-cell一起使用才有效，

.function_part figure {

1. width: 110px;
2. height: 110px;
3. display: table-cell;
4. border-radius: 50%;
5. vertical-align: middle;

}

加上了之后发现确实好用了，但是新的问题又来了！！

figure标签已经不在水平居中了

最终的解决办法是：

在figure标签里面再套一层i标签把

.function_part figure i {

1. width: 110px;
2. height: 110px;
3. display: table-cell;
4. border-radius: 50%;
5. vertical-align: middle;

}

这样不影响figure标签的继续水平剧中也实现了图标出现在圆圈的中间