如图，第一项和第二项要怎么垂直居中，vertical-align没效果，给第一二项设置行高？
<div class="col col-33">
总计
</div>
<div class="col col-33">0</div>
<div class="col col-33">
<div class="bg-default">0.00</div>
</div>
直接用 line-height
用display:table-cell;vertical-align:middle;试试，vertical-align:middle;是针对表格的所以先要display:table-cell;
可以看看这里http://www.zhangxinxu.com/study/200908/img-text-vertical-align.html
<div style="margin: 0 auto"></div>
首先要先搞清楚vertical-align是用来做什么，它是定义行内元素的基线相对于该元素所在行的基线的垂直对齐。看你这布局应该是div.col全部float了吧，这都不能称之为一行了，彼此之间联系除了位置关系基本上没啥联系。所以使用vertical-align没用。有以下几种方法：
1.使用line-height,但是如果全两个div.col里面的文字超过一行，问题就来了。
2.div.col使用display:inline-block，不要用浮动，但需要清除之间默认的间隔。
3.div.col使用display:table-cell;vertical-align:middle。
4.如果你不需要支持的低版本的浏览器，则可以考虑弹性布局display: flex;align-items：center，比较好用。
5.设置div.col的高度，然后使用padding值让其居中，这种做法比较简单。
以上都是提供思路，具体问题还需具体对待，根据需求选择。
请参考下边示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>水平垂直居中</title>
<style type="text/css">
*{
margin:0;
padding:0;
background: #dedede;
}
.div{
width:300px;
height:100px;
background: #f00;
position: absolute;
left:50%;
margin-left:-150px;
top:50%;
margin-top:-50px;
}
</style>
</head>
<body>
<div class="demo">
<div class="div"></div>
</div>
</body>
</html>
我记得那个是为表格准备的对齐方式。(display:table,display:table-cell之类的)
如果显示方式不是表格的话，对于inline类型的可以用line-height……至于其他的，好像很麻烦，我不怎么清楚。